将图像渐变为透明渐变
Fir*_*DoL 35 css gradient css3
我希望有一个图像(背景图像)淡入透明,以便实际可以看到它背后的内容(由于透明度,几乎没有).
我可以通过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));
bis*_*hop 52
如果你想要这个:
你可以这样做:
<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>- 是的，但是这样，图像就不会透明，我错了吗？因此，如果我在 #under div 后面有一些文本，我将无法通过图像看到它。我之前正在测试类似的东西。 (2认同)
Row*_*use 23
如果您只想淡入背景颜色(白色,在这种情况下),请参阅此处的工作示例:
.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 );
- 这个解决方案适用于我可以使用BrowserStack测试的所有IE/FF/Chrome/Safari! (4认同)
小智 19
2021 更新：部分支持“mask-image”。遮罩图像（在本例中为线性渐变）设置在父元素 (.image_preview_container) 上。在此示例中，子项 (.image_preview) 在 50% 时开始淡入透明度。然后100%完全透明。（也可以使用其他长度，如“px”）
它在火狐浏览器中运行。也可能在其他人身上。到目前为止这对我有用。如果不适用于您的浏览器，请发表评论。
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>