Question

我有一个标题颜色为＃524a48的Photoshop设计。在Photoshop设计中，文本上有一个渐变叠加

h1 {
color: #524a48;
background: linear-gradient(to right, rgba(255,239,223, 0) 0%, rgba(255,239,223, 1));
opacity: 40%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

所以叠加渐变来自不透明度0 - 1.在这里使用此代码时，＃524a48的颜色不显示，我有半透明的文字行... 使用＃524a48作为webkit-text-fill-color值完全隐藏了我的渐变。

如何使用css在文本颜色上叠加颜色？
另外，我如何确保为此做出后备？因此，没有Chrome或safari的浏览器会看到＃524a48。传递＃524a48的颜色属性是否足够？

提前谢谢

Answer 1

你应该可以用这个

来解决问题

您只需编辑所有Alpha图层值

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(0deg, rgba(255,239,223, 1), rgba(255,239,223, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(82,74,72,0.5);
}

<div>
<h1>LINEAR GRADIENT TEXT</h1>
</div>

关于这是如何工作的，我没有看到另一种方法来做你的建议

其他然后直接创建一个具有完全相同内容的绝对div，并指定color属性。我会选择第一个解决方案

如何使用css在文本上添加颜色渐变叠加？

1 个答案: