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

Posted 2023-03-06

技术标签:

【中文标题】CSS 中从顶部 0% 到底部 100% 的透明（不透明度）图像【英文标题】：Transparent (opacity) image from top 0% to bottom 100% in CSS 【发布时间】：2014-07-09 23:30:09 【问题描述】：

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

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

【问题讨论】：

CSS AFAIK 不太可能。事实上，我认为根本不可能完全重现这一点（尤其是如果 img 的顶部是 实际上 透明的）......至少在没有大量不必要的额外 html 和 CSS 的情况下是不可能的.有时图像是最好的方式。好的，谢谢您的回复。我会尝试以不同的方式来做。 :) 如果您只需要从白色到图像的“透明度”...它会更容易...可以吗？ 【参考方案1】：

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

【讨论】：

【参考方案2】：

您应该使用 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`

【讨论】：

【参考方案3】：

我认为根本不可能完全复制它（尤其是如果 img 的顶部实际上是透明的）。如果您只需要从白色到图像的“透明度”......这会更容易一些......

JSfiddle Demo

HTML

<div class="wrapper">
    <div class="imgwrap">
    <img src="http://lorempixel.com/output/nature-q-c-200-200-2.jpg" />
    </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;

【讨论】：

相同的区别。你不能让一开始就不透明的东西变得透明。【参考方案4】：

正如其他答案所说：在 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;

【讨论】：

【参考方案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

【讨论】：

【参考方案6】：

使用绝对位置和 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>

【讨论】：

以上是关于CSS 中从顶部 0% 到底部 100% 的透明（不透明度）图像的主要内容，如果未能解决你的问题，请参考以下文章

CSS中的渐变——线性渐变

前端平滑滚动到底部/顶部

JavaScript实现快速定位到底部和顶部

iOS Core Graphics 中的“形状爆裂”笔划

在 CSS3 或 jQuery 中将元素的宽度从 0% 设置为 100% 动画，它和它的包装器只需要它们需要的宽度，没有预先设置的宽度

如何用css将底部的内容定位到顶部

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

CSS

检查这个Demo jsFiddle Example

检查这个`Demo jsFiddle Example`