Question

我希望将图像（背景图像）淡化为透明，以便实际可以看到它背后的内容（由于透明度，几乎没有）。

我可以通过PNG图像显然实现它，但是每次我想要更改start =＆gt;时，我都要求我的图形设计师更改图像。停止透明点（也许我想要更多的颜色，或者我想要更少的颜色和更多的透明度）。

我有可能用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));

Answer 1

如果你想要这个：

enter image description here

你可以这样做：

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

Answer 2

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

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

Answer 3

2021 年更新： 'mask-image' 部分支持。遮罩图像（在本例中为线性渐变）设置在父元素 (.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>

将图像渐变为透明渐变

3 个答案: