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

问题描述 投票：0回答：7

有可能做到吗？就在CSS中，就像这张图片一样，所以我的意思是如果我放上

<div>
标签背景图像，我需要它从上到下是透明的。

我想创建类似于下图的东西：

enter image description here

image css opacity css-shapes
7个回答
10
投票

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

但是

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

演示

输出：

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;
}
6
投票

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

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%);

检查这个演示jsFiddle示例

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;

}
0
投票

使用绝对位置和 z 索引在图像上叠加渐变 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>
0
投票

很老的讨论，但最近提出了同样的问题。您只需要创建 2 个容器。外部容器应包含您的背景图像，内部容器将包含渐变（在本例中为白色到透明）：

 .outer-container {
  min-height: 100vh; 
  width: 100%;
  background-image: url('/images/home_bg.png');
  background-size: cover;
}

.inner-container {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.996) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

div 结构将是这样的：

<div class="outer-container">
  <div class="inner-container">
</div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.