无论如何使用此文本渐变方法,并在文本上也有一个投影.
http://css-tricks.com/snippets/css/gradient-text/
http://css-tricks.com/snippets/css/gradient-text/
当我设置我的阴影像
text-shadow: 1px 1px 2px #000;
然后它会弄乱我的文本渐变,因为背景设置为透明.
有没有人知道webkit浏览器的解决方案.
解决方法
更新
h1 {
font-size: 72px;
background-image: -webkit-linear-gradient(#eee,#333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
}
h1:after {
background: none;
content: attr(data-text);
left: 0;
top: 0;
z-index: -1;
position: absolute;
text-shadow: 1px 1px 2px #000;
}
原来在这里:)
http://viget.com/inspire/background-clip-text-shadow-gradients
来自评论的更新链接
http://jsfiddle.net/2GgqR/5/
在这里,我将背景的背景颜色添加到：after
h1:after {
background: #f3f3ee;
}
.background{
background-color: #f3f3ee;
position: relative;
z-index: 1;
}
