49

我想让一个图像（背景图像）淡化为透明，以便实际上可以看到它背后的内容（几乎没有，这要归功于透明度）。

我可以用PNG图像显然实​​现它，但是每次我想更改开始=>停止透明度点时，我都需要要求我的图形设计师更改图像（也许我想要更多颜色，或者我想要更少的颜色等等透明度）。

我有没有机会用 CSS3 达到同样的效果？我尝试在 jpg（和 png）上对透明应用渐变，但我无法看穿它，除非 PNG 已经完成了透明度（基本上是渐变）（这使得 css 渐变无用）。

有什么建议吗？我正在通过网络努力挖掘，但似乎我没有使用正确的关键字，或者这可能是不可能的。

更新1：

代码说了很多话，我想做这样的事情（但语法显然是错误的）：

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));
4

3 回答 3

84

如果你想要这个：

在此处输入图像描述

你可以这样做：

<html>
  <style type='text/css'>
    div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
    img {
      -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    }
  </style>
  <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
    <img src='https://i.imgur.com/sLa5gg2.jpg' />
  </body>
</html>

于 2013-10-31T18:51:07.980 回答
24

如果您只想淡入背景颜色（在这种情况下为白色），请参见此处的工作示例：

http://jsfiddle.net/yw9v7zm5/

图像容器 div 的 .css 使用：

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
于 2015-04-06T04:00:24.130 回答
3

2021 年更新：部分支持“掩码图像”。在父元素 (.image_preview_container) 上设置蒙版图像（在本例中为线性渐变）。在此示例中，子 (.image_preview) 以 50% 的速度开始淡入透明。然后在 100% 时完全透明。（也可以使用其他长度，例如“px”）

它在Firefox中工作。并且可能在其他人身上。到目前为止，这对我有用。如果不适用于您的浏览器，请发表评论。

CSS：

.image_preview_container {
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
}
.image_preview {
  background-image: url("IMAGE LOCATION");
}

HTML：

<div class="image_preview_container">
    <div class="image_preview"></div>
</div>

在原始问题的上下文中：

CSS：

.parent{
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
}
.child{
  background-image: url("splash_bottom3.png");
}

HTML：

<div class="parent">
    <div class="child"></div>
</div>
于 2021-05-07T19:50:55.623 回答