Question

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我终于通过向.box > p添加一行CSS来找到满足我所有要求的解决方案：-webkit-mask-image（Adrian van Vliet接受的回答）。我已更新我的codepen以显示此解决方案：http://codepen.io/thdoan/pen/wKZBrN

尽管这被认为是“非标准”的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

的下部

＆＃13;
＆＃13;
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%;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

3 个答案: