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”所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)