如何使用 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

如果您总是希望文本透明，您可以使用 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 2

~~你可以在这里玩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>

Answer 3

我终于找到了满足我所有要求的解决方案，只需在 .box > p 中添加一行 CSS：-webkit-mask-image (accepted answer by Adrian van Vliet). I've updated my codepen to show this solution: 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 掩码的代码笔来更新这个答案。

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

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

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

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

How to fade out text on top of semi-transparent div using CSS?

css

opacity

fadeout