logo标签列表

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

imagecssopacitycss-shapes
7

这是否可以做到呢？只用CSS，就像这张图片一样。我的意思是如果我在 <div> 标签上放置背景图像，那么我需要它从顶部到底部都是透明的。

我想创造类似下面图片的东西：

enter image description here

据我所知，使用CSS并不是真正的可能性。实际上，我认为根本不可能完全复制它（特别是如果图像的顶部实际上是透明的）...至少不需要大量不必要的额外HTML和CSS。有时候，图片是最好的选择。 - Paulie_D
好的，谢谢回复。我会尝试以不同的方式来做。 :) - Edoras
如果您只需要“透明度”从白色到图像...那就简单一些了...这样可以吗？ - Paulie_D
6个回答
10

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

但是

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

演示

输出：

使用CSS3插入阴影在图像上模拟透明度

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

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

这个答案可能需要更新，因为现代浏览器都支持(-webkit-)mask-image: linear-gradient()了。https://jsfiddle.net/19ps6vry/ - Kaiido
3
我为你准备了一个小提琴。你必须使用带有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;
}
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。
1
我不认为完全复制那个效果是可能的（特别是如果图片顶部实际上是透明的）。如果你只需要“透明度”从白色到图像...那就稍微容易一些。 JSfiddle演示 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;

}
同样的区别。你不能使本来不透明的东西变得透明。 - Paulie_D
0

使用position: absolute和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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接