CSS中从顶部0％到底部100％的透明（不透明度）图像

时间：2014-05-21 10:57:13

标签： css image css3 opacity css-shapes

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

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

enter image description here

6 个答案:

答案 0 :(得分：7)

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

但是

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

<强> DEMO

输出：

Simulated transparency over image with CSS3 inset box shadows

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

答案 1 :(得分：3)

实际上，您可以在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

答案 2 :(得分：2)

我made a fiddle供您使用。你必须使用rgba渐变。并非所有浏览器都支持此功能，因此您可能需要操作图像。然而，这是在CSS中执行此操作的唯一方法。

以下是代码：

<强> HTML： 

<html>
    <head>
    </head>
    <body>
        <img src="http://upload.wikimedia.org/wikipedia/meta/6/6d/Wikipedia_wordmark_1x.png" />
        <div class="whatever"></div>
    </body>
</html>

<强> CSS： 

body {
    margin:0px;
}

img {
    height:30px;
    position:relative;
}

.whatever {
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #ff00ff),
        color-stop(1, rgba(0,0,0,0))
    );
    background-image: -o-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: -moz-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(to bottom, #ff00ff 0%, rgba(0,0,0,0) 100%);
    height:30px;
    position:relative;
    width:100px;
    top:-34px;
}

答案 3 :(得分：1)

您应该使用 background CSS属性，并将自己设置的 linear-gradient 值设置为您的签名。

CSS 

background: linear-gradient(to bottom, rgba(255,255,255,1) 30%,rgba(0,0,0,0) 100%);

检查此 Demo jsFiddle Example

答案 4 :(得分：1)

我认为根本不可能再现它（特别是如果img的顶部实际上是透明的）。如果你只是需要“透明度”从白色到图像...它会更容易......

JSfiddle Demo

<强> HTML 

<div class="wrapper">
    <div class="imgwrap">
    <img src="http://lorempixel.com/output/nature-q-c-200-200-2.jpg" alt=""/>
    </div>
</div>

<强> CSS 

body {
    background-color: #bada55;
}

.wrapper {
    height:240px;
    display: inline-block;
    margin: 25px;
    border:1px solid grey;
    background-color: white;
    padding:8px;
}

.imgwrap {
    display: inline-block;
    position: relative;
}

.imgwrap:after {
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(rgba(255,255,255,1) 35%, rgba(255,255,255,0) 100%);
    z-index:1;

}

答案 5 :(得分：0)

使用位置绝对和z-index覆盖图像上的渐变div：

CSS 

section{
    margin:0px 0px;
    padding:0px 0px;
    width: 300px;
    display:block;
    height: auto;
    position:relative;
}
section #overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(255,255,255,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */
width:100%;
height:100%;
z-index:2;    
}
section #imgContainer{
    width: 300px;
    height: auto;
    margin: 0px 0px;
    padding: 0px 0px;
    overflow: hidden;
    display: inline-block;

}
section #imgContainer img{
    width: 300px;
    padding: 0;
    margin: 0;
    display: block;

}

HTML 

  <section>
        <div id="overlay">
        </div>
        <div id="imgContainer">
           <img src="" />
        </div>
    </section>
相关问题
最新问题