div底部的渐变不透明度
Posted
技术标签:
【中文标题】div底部的渐变不透明度【英文标题】：Gradient opacity on the bottom of div 【发布时间】：2013-09-10 04:11:07 【问题描述】：我想在这张图片上创建类似的效果 - 内容底部的渐变不透明度：
我该怎么做？
【问题讨论】：
【参考方案1】：我知道这是旧的，但 JIC 有人发现这是在寻找解决方案。 Love Trivedi 接受的答案很好，但仍有一些问题。使用绝对定位是可以的，但要覆盖 div；建议同时使用 top: 0px 和 right: 0px。 filter 中还有额外的零，开头应该是 startColorstr='#89fff1' 以与其他起始颜色保持一致。
此解决方案也有 2 个缺点。首先，它不允许选择底层文本，因此您需要在 gradientback 类中使用 pointer-events: none; 来允许选择文本。第二个问题是这个解决方案会淡化为一种颜色，因此您必须确保您的第二种颜色与页面背景匹配才能获得所需的效果。这使用了一个覆盖 DIV，因此淡化到透明不会对内容 DIV 的视觉效果产生任何影响。
这里是更新后的jsfiddle，其中包含建议的更改和第一行上的链接，以便您可以测试指针事件选项。
.
更现代的解决方案是使用 CSS3 掩码图像。 jsfiddle 解决方案 2 的示例。
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
它对旧版浏览器的支持较少，但实际上将容器淡化为透明，从而允许各种页面背景，同时仍保持所需的效果。
.
这里是第一个解决方案的更新 html，以防 jsfiddle 给您带来问题
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>gradient test</title>
<meta name="description" content="gradient test">
<meta name="author" content="Viking">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
body
background: #000;
.content
width: 500px;
height: 300px;
position: relative;
color: #fff;
overflow: hidden;
.gradientback
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
pointer-events: none;
background: -moz-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(137, 255, 241, 0)), color-stop(100%, rgba(0, 0, 0, 1))); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%); /* W3C */
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#89fff1', endColorstr='#000000', GradientType=0); /* IE6-9 */
</style>
<div class="content">
Loriem <a href="https://google.com" target="google">ispsum</a> is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
<div class="gradientback"></div>
</div>
</body>
</html>
以及现代解决方案。您不需要内部 DIV，只需将 mask-image 行添加到内容类即可。
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>gradient test</title>
<meta name="description" content="gradient test">
<meta name="author" content="Viking">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
body
background: #000;
.content
width: 500px;
height: 300px;
position: relative;
color: #fff;
overflow: hidden;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
</style>
<div class="content">
Loriem <a href="https://google.com" target="google">ispsum</a> is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
Loriem ispsum is simpaly dummy text<br>
</div>
</body>
</html>
【讨论】：
【参考方案2】：试试这个。它会解决你的问题。白黑渐变
.box
padding: 15px;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(221, 221, 221,0.8)), to(rgba(255, 255, 255,0.2)), color-stop(.5,#fff));
【讨论】：
【参考方案3】：你可以使用这个 HTML
<div class="content">
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
Loriem ispsum is simply dummy text<br>
<div class="gradientback">
</div>
</div>
使用这个 CSS
bodybackground:#000;
.content
width:500px;
height:300px;
position:relative;
color:#fff;
overflow:hidden;
.gradientback
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:50px;
background: -moz-linear-gradient(top, rgba(137,255,241,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,255,241,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
这里是jsfiddle link
【讨论】：
上述代码中有 2 个错误。 HTML 中的额外</div> 和 .content css 规则中的“位置”拼写错误。
jsfiddle 似乎不存在了。是否有可能以某种方式更新该链接？【参考方案4】：
你可以有一个重复的图像。例如 10px 高度渐变。
将您的 div 定位到相对位置：
/* Example width*/
div
position : relative;
width : 500px;
您的图像将是绝对位置
#gradientImage
height : 10px;
background : url(path/to/image.png) repeat x;
position : absolute;
bottom : 0;
编辑
你的 div 也必须有一个宽度，这样你的重复图像将取决于父级的宽度
【讨论】：
我会使用position: fixed 将其粘贴到页面底部。【参考方案5】：
只需使用一张图片并将其固定在底部。CSS Tricks 有关于此问题的帖子并提供图片。
或者，如果您想要使用 CSS，请关注 this 文章，该文章向您展示如何使用 CSS 和 javascript 来实现这一点
【讨论】：
【参考方案6】：希望你想要像this 这样的东西。
div
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)), color-stop(.5,#333333));
【讨论】：
以上是关于div底部的渐变不透明度的主要内容，如果未能解决你的问题，请参考以下文章