无论如何使用此文本渐变方法,并在文本上也有一个投影.
http://css-tricks.com/snippets/css/gradient-text/
http://css-tricks.com/snippets/css/gradient-text/
当我设置我的阴影像
@H_403_5@text-shadow: 1px 1px 2px #000;然后它会弄乱我的文本渐变,因为背景设置为透明.
有没有人知道webkit浏览器的解决方案.
解决方法
更新
@H_403_5@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
@H_403_5@h1:after { background: #f3f3ee; } .background{ background-color: #f3f3ee; position: relative; z-index: 1; }