如何结合CSS“文本阴影"和"background-image:-webkit-gradient" [英] How do I combine CSS "text-shadow" and "background-image: -webkit-gradient"

问题描述

我正在尝试使用CSS文本阴影以及文本阴影和背景图像的组合在Chrome/Safari中实现渐变+文本阴影效果:-webkit-gradient，请参阅示例blw.我只能应用其中一种效果(如果添加阴影，渐变消失了.我在做什么错了?

I am trying to achieve a gradient + text shadow effect in Chrome/Safari using CSS text-shadow and a combination of text-shadow and background-image: -webkit-gradient, see example blw. I can only make one of the effects apply(if I add the shadow the gradient disappears. What am I doing wrong?

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

推荐答案

渐变消失"；因为 text-shadow 位于背景上方的水平上.

The gradient "disappears" because the text-shadow is on a level above the background.

1. 文本(透明)
2. 阴影
3. 背景.

我们可以通过以下方法解决此问题:复制文本并将其放置在原始图层下，然后在此处应用阴影，例如:

We can work around this by copying the text and put it below the original layer, then apply the shadow there, for example:

  h1 {
    position: relative;
    font-size: 100px;
    text-align: center;
  }
  
  h1 div {
    background-image: linear-gradient(white, 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>

这篇关于如何结合CSS“文本阴影"和"background-image:-webkit-gradient"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！