HTML – 带文本阴影的CSS中的渐变文本

发布时间：2020-12-14 18:37:37 所属栏目：资源来源：网络整理

导读：无论如何使用此文本渐变方法,并在文本上也有一个投影. http://css-tricks.com/snippets/css/gradient-text/ 当我设置我的阴影像 text-shadow: 1px 1px 2px #000; 然后它会弄乱我的文本渐变,因为背景设置为透明. 有没有人知道webkit浏览器的解决方案. 解决方

无论如何使用此文本渐变方法,并在文本上也有一个投影.
http://css-tricks.com/snippets/css/gradient-text/

当我设置我的阴影像

text-shadow: 1px 1px 2px #000;

然后它会弄乱我的文本渐变,因为背景设置为透明.
有没有人知道webkit浏览器的解决方案.

解决方法

更新

为您找到了解决方案,
唯一的问题是它需要html具有属性.

http://jsfiddle.net/2GgqR/2/

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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!