Html div底部的渐变不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18651345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gradient opacity on the bottom of div
提问by rafal235
I would like to create effect like on this image - gradient opacity on the bottom of content:
我想在此图像上创建类似效果 - 内容底部的渐变不透明度：
How can i do it?
我该怎么做？
采纳答案by Love Trivedi
You can use this HTML
你可以使用这个 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>
With This CSS
使用这个 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 */
}
Here is jsfiddle link
回答by Michael Schmidt
Just use a image and set it fixed on the bottom.
CSS Trickshave a post about this issue and deliver also the picture.
只需使用图像并将其固定在底部即可。
CSS Tricks有一篇关于这个问题的帖子，并提供了图片。
Or if you want it with CSS, follow thisarticle which shows you how to do this with CSS and JavaScript
或者，如果您想要使用 CSS，请按照这篇文章，向您展示如何使用 CSS 和 JavaScript 来做到这一点
回答by Yasitha
回答by Tayyab Hayat
Try this one. It will solve your problem. White and black gradient
试试这个。它会解决你的问题。白黑渐变
.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));
}
回答by markvicencio
You can have an repeating image. For example a 10px height gradient.
你可以有一个重复的图像。例如 10px 高度渐变。
position your div to relative :
将您的 div 定位到相对位置：
/* Example width*/
div {
position : relative;
width : 500px;
}
Your image would be position absolute
您的图像将是绝对位置
#gradientImage {
height : 10px;
background : url(path/to/image.png) repeat x;
position : absolute;
bottom : 0;
}
EDIT
编辑
Your div also has to have a width so your repeating image will depend on the width of the parent
您的 div 还必须有一个宽度，因此您的重复图像将取决于父级的宽度
