在半透明的背景上使 div 元素底部淡出

Question

在半透明的背景上使 div 元素底部淡出

3

我有一个包含文字的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;
}

我做了一个fiddler展示我想要做的事情：https://jsfiddle.net/ytuxn9Lu/6/（链接已编辑以添加随机背景图像，请参见编辑）。

问题在于渐变覆盖层与背景合并，因此结果不是我想要的。

我该怎么做才能实现这个效果？

谢谢！

编辑：为了添加更多信息，在实际应用中，body 具有图像背景。 #parent div具有半透明背景，#fadeout-parent div包含文本和fadeout div。因此，解决方案应该适用于任何背景颜色/图像（如果可能）。

- Shimrod

1

不要使用白色（255）RGB渐变，而是使用70％的白色RGB（179）：https://jsfiddle.net/ytuxn9Lu/4/ - APAD1

谢谢@APAD1，不过它似乎只在黑色背景下有效，如果你改变颜色（比如改成蓝色），它仍然会像之前一样显示div。 - Shimrod

你能解释一下你对背景的要求吗？可以安全地假设你希望它能在任何颜色上运行吗？ - chazsolo

在实际情况中，我使用图像作为背景，因此是的，它应该适用于任何颜色（如果可能的话！） - Shimrod

4个回答

2

我找到了一些可行的解决方法：

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中使用。

- MarioZ

1

不完全正确，半透明背景必须保持示例中的状态，只有文本应该变暗。 - Shimrod

2

我认为目前还没有完美的方式来实现这一点...

因此，这里有另一个棘手的解决方案：我的方法。 https://jsfiddle.net/ytuxn9Lu/9/

(code seems to be mandatory when posting jsfiddle link)

- kipy

这还不完美，如果你将背景改为使用纯色（例如红色），你会注意到底部的不透明度比顶部更加不透明。 - Shimrod

1

如果我说错了，请原谅我。

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

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

如果您希望背景div也淡出，可以尝试在该div上添加渐变颜色。也许可以删除

标签。

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

总之。

- EltonFlow

问题在于我需要它能够在半透明背景下工作。将其设置为白色确实可以工作，但这不是我想要做的。 - Shimrod

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Johannes · Accepted Answer

这里有一个解决方案。

我只是改变了渐变的值（使用取色器获取内容下方的颜色并添加了0.9透明度）。 https://jsfiddle.net/hgtdwbrL/1/

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