css 淡出效果（como usado no site da Sedcare）。

Posted 2021-05-13

<div id="overlay">
    <span>some text</span><br />
    <img src="http://thinkingstiff.com/images/matt.jpg" width="100" /><br />
    <p>some more text</p>
</div>

#overlay {
    border: 1px solid black;
    display: inline-block;
    position: relative;
}

#overlay::before {
    background-image: linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background-image: -moz-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background-image: -ms-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background-image: -o-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background-image: -webkit-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%;
}