像渐变一样将图像淡入透明

Question

我希望将图像（背景图像）淡化为透明，以便实际上可以看到其后面的内容（由于透明度，只能勉强看到）。

我显然可以使用 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));

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/

.css 图像容器 div 使用：

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

Answer 4

尝试：

img{mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%,transparent 100%);}

像渐变一样将图像淡入透明

问题描述投票：0回答：4

4个回答

最新问题

像渐变一样将图像淡入透明

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4