如何使用 CSS 淡出半透明 div 上的文本？

Question

我在这里看到了很多关于如何使用 CSS 淡出文本的问题，但到目前为止，所有答案都假设文本下方的元素具有纯色背景。如果文本位于不透明度小于 1（即半透明）的 div 顶部，您将如何淡出文本？运行下面的代码以查看示例。我要做的是以垂直渐变淡出该框中的文本，使字体颜色在顶部为白色，并在到达底部时淡入该框的半透明背景。

注意：即使 div 的背景不透明度发生变化（例如，0.75 而不是 0.5），该解决方案也应该无需修改即可工作。

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>

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 的跨浏览器解决方案：Applying SVG effects to HTML content。如果我让它工作，我会用一个使用 SVG 掩码的 codepen 更新这个答案。

感谢所有回复的人:-)。

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

完整的跨浏览器解决方案在 Christian Schaefer 的精彩教程CSS Masks – How To Use Masking In CSS Now 中列出。

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 */
}

Answer 3

你可以在这里使用 mix-blen-mode 和 background Gradient 来玩文字渐变 DEMO

更新
我在 p 上放置了白色透明渐变以淡化文本的向下部分NEW DEMO

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>