image - CSS中从顶部0％到底部100％的透明(不透明)图像

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

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

最佳答案

正如其他答案所言:在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;
}