html – 如何组合CSS文本阴影和“background-image：-webkit-gradient”

概述我试图在Chrome / Safari中使用CSS文本阴影以及文本阴影和背景图像：-webkit-gradient的组合来实现渐变文字阴影效果,请参见示例blw.我只能使一个效果适用(如果我添加阴影渐变消失,我做错了什么？ h1 {font-size: 100px;background-image: -webkit-gradient(linear, left top, left bottom, 我试图在Chrome / Safari中使用CSS文本阴影以及文本阴影和背景图像：-webkit-gradIEnt的组合来实现渐变文字阴影效果,请参见示例blw.我只能使一个效果适用(如果我添加阴影渐变消失,我做错了什么？

h1 {Font-size: 100px;background-image: -webkit-gradIEnt(linear,left top,left bottom,from(white),to(black));-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-shadow: 0 1px 1px #fff;}

解决方法 渐变“消失”,因为文本阴影位于背景上方.

>文字(透明)
阴影
>背景.

我们可以通过复制文本并将其放在原始图层下面,然后在那里应用阴影,for example：

h1 {    position: relative;    Font-size: 100px;    text-align: center;  }  h1 div {    background-image: -webkit-gradIEnt(linear,to(black));    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    position: absolute;     wIDth: 100%;}  h1:after {    text-shadow: 10px 10px 11px #fff;    color: transparent;  }  #hello:after {        content: 'Hello World';  }

<h1 ID="hello"><div>Hello World</div></h1>

总结

以上是内存溢出为你收集整理的html – 如何组合CSS文本阴影和“background-image：-webkit-gradient”全部内容，希望文章能够帮你解决html – 如何组合CSS文本阴影和“background-image：-webkit-gradient”所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。