Gradient opacity on the bottom of div

问题

I would like to create effect like on this image - gradient opacity on the bottom of content:

How can i do it?

回答1:

You can use this 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

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

回答2:

Hope you want some thing like 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));
}

回答3:

Just use a image and set it fixed on the bottom.
CSS Tricks have a post about this issue and deliver also the picture.

Or if you want it with CSS, follow this article which shows you how to do this with CSS and JavaScript

回答4:

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

回答5:

You can have an repeating image. For example a 10px height gradient.

position your div to relative :

/* 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

来源：https://stackoverflow.com/questions/18651345/gradient-opacity-on-the-bottom-of-div

标签

html

css

gradient

opacity