12

无论如何使用这种文本渐变方法并且在文本上也有阴影。 http://css-tricks.com/snippets/css/gradient-text/

当我设置我的阴影时

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

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

4

5 回答 5

19

您可以结合filter: drop-shadowCSS 属性来实现这一点。

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px #333);
}
<h1>Example</h1>

于 2018-04-07T10:49:22.683 回答
12

更新

为您找到了解决方案，唯一的问题是它要求 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;
}
于 2013-02-25T22:38:35.647 回答
1

我可能真的对此表示反对，但我相信这样做的唯一方法是在后面放置一个重复的元素。这只是一个想法。

于 2013-02-25T22:21:02.760 回答
0

由于某些浏览器没有获得“剪辑”规则，我需要找到一种仅使用文本阴影创建渐变的方法。所以我设法重复这个词并使用 color transparent 。在这里检查结果

HTML

<h2 class="points">
  <p><span class="text">REPEAT THIS WORD</span><span class="gradient">REPEAT THIS WORD</span><span class="gradient">REPEAT THIS WORD</span></p>
</h2>

CSS

html, body {
  background: black;
  font-size: 16px;
  height: 100%;
  width: 100%;
}

.points {
  font-size: 2.8em;
  padding: 0 0.2em 0 1em;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
}
.points p {
  position: relative;
}
.points span {
  width: 100%;
}
.points span.text {
  color: white;
  position: relative;
  text-shadow: -2px 2px 0 #882b06, 2px 2px 0 #882b06, 2px -2px 0 #882b06, -2px -2px 0 #882b06;
}
.points span.gradient {
  color: transparent;
  position: absolute;
}
.points span:nth-child(2), .points span:last-child {
  color: transparent;
  left: 0;
  overflow: hidden;
  right: 0;
  width: 100%;
  white-space: nowrap;
}
.points span:nth-child(2) {
  bottom: 0;
  text-shadow: 0 -0.33em 2px #fbe8a1;
  height: 0.8em;
}
.points span:last-child {
  bottom: 0.2em;
  text-shadow: 0 -0.55em 3px #ecb752;
  height: 0.4em;
}

https://codepen.io/kengreg/pen/JjrwLyL

于 2022-01-14T01:40:44.620 回答
0

我想出了一个不使用filterand的解决方案z-index。如果您有背景或前景，则可以使用它：

h1 {
    position: relative;
}

h1::after {
    background-image: linear-gradient(#f00, #fcc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
}

h1::before {
    text-shadow: #000 1px 1px 2px;
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
}

效果：https ://jsfiddle.net/m9dtf6po/2/

当然，由于我使用的是::beforeand ::after，所以需要一个属性，但是可以共享该属性。使用的问题z-index是：

当我确实有一个背景和一个前景夹在我的文本中时，这就是我遇到的问题，如下图所示： 在此处输入图像描述

文本S+需要位于条形图的顶部，但最重要的是可以有一个框。我实际上找到了这篇文章并尝试了 Karl 的解决方案，但阴影消失在酒吧后面。

于 2020-05-22T07:53:41.340 回答