我希望有一个文本可以在某个点x切换颜色.我提供了一个使用文本两次产生结果的示例,开关为45px.有没有办法在没有文本两次的情况下在css中执行此操作？也许使用svg？
div{
width: 400px;
height: 40px;
border: 1px solid #000;
position: relative;
}
div>span{
position: absolute;
top: 0;
left: 0;
}
div :nth-child(2){
color: blue;
clip: rect(0 200px 40px 45px);
}
div :nth-child(1){
color: red;
clip: rect(0 45px 40px 0);
}
Some bicolored Text
Some bicolored Text
您可以使用:before和:after伪类:
div {
width: 400px;
height: 40px;
border: 1px solid #000;
position: relative;
}
div:before,
div:after {
content:attr(data-text);
}
div:after{
position: absolute;
top: 0;
left: 0;
}
div:after {
color: blue;
clip: rect(0 200px 40px 45px);
}
div:before {
color: red;
clip: rect(0 45px 40px 0);
}
在Webkit中,我们只有-webkit-background-clip:text属性/值.
body {
text-align: center;
}
h1 {
display: inline-block;
font-size: 36px;
background: linear-gradient(to right, red 0%, red 50%, blue 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}LONG HEADING TEXT
您可以使用伪元素.它会让你
改变字母中间的颜色
保持显示内容的语义
防止语义重复内容
h1{
position:relative;
text-transform:uppercase;
color:#000;
}
h1:before{
content: attr(data-content);
position:absolute;
top:0; left:0;
width:2.2em;
overflow:hidden;
color:#ccc;
}Bicolor
另一种可能的选择是使用SVG.您可以使用渐变在SVG中创建多色文本.如果两个相邻的渐变色块位于相同的位置,那么您将在颜色之间获得明显的过渡.如果两个相邻的渐变停止位于不同的位置,那么您将在颜色之间获得平滑过渡.你可以拥有任意数量的色块.例如...
请注意,在SVG中,颜色停止位于相对位置(例如0到1,0%到100%).如果您尝试将颜色停留在特定像素位置,这可能会使其变得有点困难.
请注意,在SVG中,您必须手动将文本元素放在svg元素中.
得到它了!从答案中混合了一些东西来得到这个:
div{
border: 1px solid #000;
position: relative;
display: inline-block;
}
div>span{
color: rgba(0, 0, 0, 0);
z-index: 3;
}
div:before, div:after{
content: attr(data-content);
position: absolute;
top: 0;
left: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div:before{
color: blue;
clip: rect(0 200px 40px 45px);
z-index: 1;
}
div:after{
color: red;
clip: rect(0 45px 40px 0);
z-index: 2;
}
Some bicolored Text
京公网安备 11010802040832号 | 京ICP备19059560号-6 