CSS中从顶部0%到底部100%的透明(不透明度)图像

Question

它有可能做到吗？只是在CSS中,就像这张图片一样,所以我的意思是如果我放上<div>标签背景图片,我需要它从上到下透明.

我想创建类似于下图的内容:

Answer 1

正如其他答案所述:在CSS中无法使图像从上到下透明.

但

如果你有一个坚实的背景颜色(或类似),你可以模拟CSS3插入框阴影的透明度.
对于图像白色叠加和半透明黑色矩形.在下面的演示中,我使用伪元素来最小化HTML标记.

DEMO

输出:

HTML:

<div class="image"></div>

CSS:

.image{
    position:relative;
    height:500px;
    width:500px;
    margin:50px auto;
    background: url('http://lorempixel.com/output/people-q-c-640-480-8.jpg');
    background-size:cover;
    -moz-box-shadow: inset 0px 850px 500px -500px #fff;
    -webkit-box-shadow: inset 0px 850px 500px -500px #fff;
    -o-box-shadow: inset 0px 850px 500px -500px #fff;
    box-shadow: inset 0px 850px 500px -500px #fff;
}
.image:before,.image:after{
    content:'';
    position:absolute;
    left:5%;
    opacity:0.5;
}
.image:before{
    top:0;
    width:20%;
    height:100%;
    -moz-box-shadow: inset 0px 850px 500px -500px #000;
    -webkit-box-shadow: inset 0px 850px 500px -500px #000;
    -o-box-shadow: inset 0px 850px 500px -500px #000;
    box-shadow: inset 0px 850px 500px -500px #000;
}
.image:after{
    width:20%;
    height:10%;
    top:100%;
    background:#000;
}

Answer 2

事实上，你可以在 webkit 中做到这一点！Mozilla 允许使用 SVG 蒙版，但我不会深入讨论。IE 中零支持。

演示：JSFiddle

HTML：

<div>
    <img src="http:/www.fillmurray.com/300/200"/>
</div>

CSS：

div {
  -webkit-mask-size: 300px 200px;
  -webkit-mask-image: -webkit-gradient(linear, center top, center bottom, 
  color-stop(0.00,  rgba(0,0,0,0)),
  color-stop(1.00,  rgba(0,0,0,1)));
}

参考： http: //caniuse.com/css-masks