CSS中带有文本阴影的渐变文本 | CSS中带有文本阴影的渐变文本

本文介绍了CSS中带有文本阴影的渐变文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

仍然可以使用此文本渐变方法，并且在文本上也有阴影. http://css-tricks.com/snippets/css/gradient-text/

Is there anyway to use this text gradient method and also have a drop shadow on the text.http://css-tricks.com/snippets/css/gradient-text/

将阴影设置为

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

然后它弄乱了我的文本渐变，因为背景设置为透明.有谁知道针对Webkit浏览器的解决方案.

Then it messes up my text gradient because the background is set to transparent.Does anyone know of a solution to this for webkit browsers.

推荐答案

已更新

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

Found a solution for you,only problem is it requires the html to have a attribute.

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

original is here :)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;
}

这篇关于CSS中带有文本阴影的渐变文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！