我想在这张图片上创建类似的效果 - 内容底部的渐变不透明度：
我该怎么做？
问问题
37604 次
6 回答
20
您可以使用此 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
body{background:#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 */
}
于 2013-09-06T06:40:49.020 回答
3
希望你想要这样的东西。
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));
}
于 2013-09-06T06:39:35.620 回答
2
只需使用图像并将其固定在底部即可。
CSS Tricks有一篇关于这个问题的帖子并提供了图片。
或者，如果您想要使用 CSS，请按照这篇文章向您展示如何使用 CSS 和 JavaScript 做到这一点
于 2013-09-06T06:41:32.577 回答
0
试试这个。它会解决你的问题。白色和黑色渐变
.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));
}
于 2018-09-30T04:02:10.577 回答
0
我知道这是旧的，但 JIC 有人发现这正在寻找解决方案。Love Trivedi 接受的答案很好，但仍有一些问题。使用绝对定位是可以的，但要覆盖 div；建议同时使用 top: 0px 和 right: 0px。中还有额外的零filter，开始应该startColorstr='#89fff1'与其他起始颜色保持一致。
此解决方案也有两个缺点。首先，它不允许选择底层文本，因此您需要pointer-events: none;在 gradientback 类中允许选择文本。第二个问题是这个解决方案会淡化为一种颜色，因此您必须确保您的第二种颜色与页面背景匹配才能获得所需的效果。这使用了一个覆盖 DIV，因此褪色到透明不会对内容 DIV 的视觉效果做任何事情。
这是一个更新的jsfiddle，其中包含建议的更改和第一行的链接，因此您可以测试指针事件选项。
.
更现代的解决方案是使用 CSS3 mask-image。解决方案 2 的jsfiddle示例。
-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>
于 2022-01-04T20:51:39.980 回答
-1
你可以有一个重复的图像。例如 10px 高度渐变。
将您的 div 定位到 relative ：
/* Example width*/
div {
position : relative;
width : 500px;
}
您的图像将是绝对位置
#gradientImage {
height : 10px;
background : url(path/to/image.png) repeat x;
position : absolute;
bottom : 0;
}
编辑
您的 div 还必须有一个宽度，因此您的重复图像将取决于父级的宽度
于 2013-09-06T06:41:46.150 回答