Question

我有一个包含文本的div放在半透明背景上。我希望这个div的底部逐渐消失。

我使用渐变来实现这一目标。在非半透明的背景下，它可以毫无问题地工作。

#fadeout {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    pointer-events: none;
}

我让这个小提琴手显示我想要做的事情：https://jsfiddle.net/ytuxn9Lu/6/（链接编辑添加随机背景图片，请参阅编辑）

问题在于渐变叠加会增加背景，因此结果不是我想要的。

我能做些什么来实现这个目标？

谢谢！

编辑：要在实际应用程序中添加更多信息，body具有图像背景。 #parent div具有半透明背景，#fadeout-parent div包含文本和fadeout div。无论背景颜色/图像如何（如果可能），解决方案都可以正常工作。

Answer 1

这里有一个解决方案

https://jsfiddle.net/hgtdwbrL/1/

我刚刚更改了渐变的值（使用颜色选择器从内容下方获取颜色并添加了0.9透明度）：

background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(179, 179, 179, 0.9) 95%);

Answer 2

我认为实现这一目标的完美方式目前尚不存在。

所以，还有另一个棘手的解决方案：我的

https://jsfiddle.net/ytuxn9Lu/9/

(code seems to be mandatory when posting jsfiddle link)

Answer 3

如果我咆哮错误的树，请原谅我。

如果你只想在div中淡出文本，你可以改为：

#parent {
    background-color: white;
    padding: 20px;
}

如果你想让背景div淡出，你可以尝试在该div上添加渐变色。也许删除

<div id="fadeout"></div>

共

Answer 4

我找到了可行的方法：

body {
  background: url(https://unsplash.it/900/600?random);
  padding: 50px;
}
#parent {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
}
#fadeout-parent {
  position: relative;
  -webkit-mask: -webkit-gradient(linear, center top, center bottom, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.35, rgba(0, 0, 0, 1)), color-stop(0.50, rgba(0, 0, 0, 1)), color-stop(0.65, rgba(0, 0, 0, 1)), color-stop(1.00, rgba(0, 0, 0, 0)));
}

<body>
  <div id="parent">
    <div id="fadeout-parent">
      <h1>An h1 header</h1>

      <p>Paragraphs are separated by a blank line.</p>

      <p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists look like:</p>

      <ul>
        <li>this one</li>
        <li>that one</li>
        <li>the other one</li>
      </ul>

      <p>Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.</p>

      <blockquote>
        <p>Block quotes are written like so.</p>

        <p>They can span multiple paragraphs, if you like.</p>
      </blockquote>

    </div>
  </div>
</body>

它有一个缺点，浏览器兼容性。我在Chrome和Opera工作。

在半透明背景上淡化div的底部

4 个答案: