image - 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;
}