如何将 CSS“文本阴影”与 CSS 结合起来?和“背景图像:-webkit-gradient”
我正在尝试使用CSS文本阴影以及文本阴影和背景图像的组合在Chrome/Safari中实现渐变+文本阴影效果:-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;
}
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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
渐变“消失”是因为
text-shadow
位于背景之上。我们可以通过复制文本并将其放在原始图层下方,然后在此处应用阴影来解决此问题,例如< /a>:
The gradient "disappears" because the
text-shadow
is on a level above the background.We can work around this by copying the text and put it below the original layer, then apply the shadow there, for example:
无需额外的 HTML 标记或伪元素,您就可以使用过滤器属性和投影功能来实现此效果。此方法也适用于背景图像与渐变。
小提琴:https://jsfiddle.net/eywda89g/
With no extra HTML markup or pseudo elements you can achieve this effect using the filter property and drop-shadow function. This method also works with a background image vs gradient.
Fiddle: https://jsfiddle.net/eywda89g/
这个答案与上面 @KennyTM 的答案类似,除了他的答案将阴影硬编码到 CSS 中,这不适合动态文本,例如 CMS 中的文本。另外,他的方法需要为每个实例提供一个单独的 ID,如果您打算经常使用此效果,这将非常乏味。下面的示例使用类来代替,并允许动态文本。
试试这个:
然后在 HTML 中:
只需确保
中的文本与
title
属性中的文本匹配即可。这是此方法的 Codepen 示例:
https://codepen.io/mprewitt/pen/gexypd
This answer is similar to the answer by @KennyTM above, except his answer has the shadow hard-coded into the CSS, which is not suitable for dynamic text such as in a CMS. Also, his method requires a separate ID for each instance, which would be very tedious if you plan to use this effect a lot. The example below uses a class instead, and allows dynamic text.
Try this:
And then in your HTML:
Just make sure that the text in the
<div>
matches the text in thetitle
attribute.Here is a Codepen example of this method:
https://codepen.io/mprewitt/pen/gexypd
这些答案对我获得最终结果有很大帮助。谢谢。
所以我想我会分享它。看到我的文字颜色很浅,我需要在顶部有一个较暗的“边框”以使其流行。
另外,虽然“ems”更难使用(相对于 px),但我发现文本阴影的颜色过渡看起来更平滑,因为我也想将其设为渐变:)
适用于 Edge、Chrome 、Vivaldi 和 FireFox,不过有点模糊。
These answers helped me a lot in getting to my final result. Thank you.
So I figured I would share it. Seeing the colour of my text is light, I needed a darker "border" at the top to make it pop.
Also while 'ems' are harder to work with (as opposed to px), I found that the transition of colours for the text-shadow looks a lot smoother as I wanted to make it a gradient as well :)
Works on Edge, Chrome, Vivaldi and FireFox, a little blurry though.