如何使用CSS在半透明div上方淡化文本？

Question

我在这里看到很多关于如何使用CSS淡化文本的问题，但迄今为止所有的答案都假定文本下面的元素具有实心背景。如果文本位于本身不透明度小于1（即半透明）的div上方，你该如何淡化文本？运行下面的代码来查看示例。我想要做的是在那个框中以垂直渐变的方式淡化文本，使字体颜色在顶部为白色，并在达到底部时淡入框的半透明背景中。

注意：解决方案应该能够在div的背景不透明度更改时（例如，从0.5更改为0.75）而无需修改即可工作。

body {
  background: #333;
  color: #fff;
}

.box {
  width: 320px;
  background: rgba(204, 153, 153, 0.5);
  border: 2px solid #000;
  padding: 1rem;
}

.box > p {
  margin: 0;
}

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
</div>

- thdoan

---

所以你想放置3个DIV，一个带有文本，第二个是棕色半透明的，第三个是黑色的（也是透明的），对吗？ - Pirate X

@PirateX 我希望代码片段中的文本能够渐变为与半透明框相同的颜色。 - thdoan

我修改了我的答案，提供了一个我找到的示例，展示了我认为你在问什么。 - Knight Yoshi

Answer 1

通过向.box > p添加只有一行的CSS代码，我终于找到了一个满足所有需求的解决方案：-webkit-mask-image （Adrian van Vliet提供的最佳答案）。 我已经更新了我的codepen以展示这个解决方案：http://codepen.io/thdoan/pen/wKZBrN。

.box > p {
    -webkit-mask-image: -webkit-gradient(
        linear,
        left 50%,
        left bottom,
        from(rgba(0,0,0,1)),
        to(rgba(0,0,0,0))
    );
}

尽管这被视为“非标准”CSS，但对于我的情况来说并不是什么大问题，因为如果浏览器不支持它，那么内容将优雅地降级为白色文本而没有渐变淡化效果。同时，我正在尝试使用另一种更跨浏览器的解决方案，即使用SVG：将SVG效果应用于HTML内容。如果我成功了，我会用一个带有SVG遮罩的codepen更新这个答案。

感谢所有回复我的人 :-）。

更新：这里是使用SVG的解决方案：http://codepen.io/thdoan/pen/rObVdJ

完整的跨浏览器解决方案在Christian Schaefer的好教程CSS Masks - 如何立即在CSS中使用遮罩中阐述。

- thdoan

---

我在尝试访问你的“CSS Masks”链接时遇到了404错误。你能否更新一下它？ - Frank Tan

@FrankTan 幸运的是，在页面变黑之前我已经剪贴了这个链接：https://www.evernote.com/shard/s64/sh/2ac7db64-4e50-460e-b5ee-62da77bbb150/c2a8dd92fb525c11871b86b6f990d6dc - thdoan

Answer 2

如果您想始终保持文本透明，可以使用RGBA颜色值。其中最后一个值alpha控制文本的不透明度，范围从0到1。

.box > p {
color: rgba(255, 255, 255, .5);
}

如果您想进行过渡动画

如果您希望在悬停时更改它

.box > p {
color: rgba(255, 255, 255, .5);
}
.box > p:hover {
color: rgba(255, 255, 255, 1);
}

编辑：您想要透明渐变吗？ 我找到了一个例子，http://output.jsbin.com/iwepas/3/

基本上，您只需要在其上叠加一些内容，并将其颜色从透明到不透明进行渐变。该示例使用::after伪元素。

.box > p {
  position: relative;
}

.box > p::after {
  position: absolute;
  bottom: 0;  
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
     rgba(127, 102, 102,1) 10%, 
     rgba(127, 102, 102, 0) 80%
  );
  pointer-events: none; /* so the text is still selectable */
}

- Knight Yoshi

---

嗨，Knight Yoshi，color: rgba(255, 255, 255, .5);不能使文本在垂直渐变中淡出。 - thdoan

是的，我重新阅读了您的问题，并在回答中添加了一个我认为您要求的示例。我将添加来自示例的代码。 - Knight Yoshi

谢谢您的快速回答。使用示例代码它有效，但一旦更改div的不透明度值就会出现错误(请参见http://codepen.io/thdoan/pen/wKZBrN)。我需要再次澄清我的问题：无论div的不透明度值如何，文本都应该淡入背景颜色中。由于您从技术上回答了最初编写的原始问题，如果没有人能提出适用于任何不透明度值的解决方案，我将接受您的答案。 - thdoan

如果您将其添加到.box类中，它会更优雅地淡出。我不确定这是否会更好地融合您所要求的内容。http://codepen.io/anon/pen/gaybeB 但最重要的是，它需要/应该与它重叠的元素的背景颜色匹配。 - Knight Yoshi

骑士Yoshi，你的CodePen更接近于我想要的效果，但唯一的问题是它也改变了盒子的背景颜色，这不是我想要的。 - thdoan

Answer 3

你可以在这里使用混合模式和背景渐变来玩弄文本渐变演示

更新
我在p标签上放置了白色透明渐变，以淡化文本的下部分新演示

body {
  background: #333;
  color: #fff;
  font-size: 22px;
}
.box {
  width: 520px;
  height:210px;
  border: 2px solid #000;
  padding: 1rem;
  background: rgba(204, 153, 153, 0.5);
  margin: 0px;
  padding: 0px;
}
p {
  color: rgb(255, 255, 255);
  margin: 0px;
  padding: 0px;
}
p::before {
  content: "";
  width: 520px;
  height: 210px;
  position: absolute;
  background: rgba(204, 153, 153, 0.5) linear-gradient(to bottom, rgba(255, 255, 255, 0) 10%, rgba(150, 120, 120, 0.82) 90%) repeat scroll 0% 0%;

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

- CY5

---

这也会影响字体颜色，而我不想要这样。字体颜色应该保持为白色；唯一改变的是文字透明度，随着淡出和与div混合。 - thdoan

@10basetom 我已经更新了我的答案，颜色是白色，但在底部会褪色。 - CY5