CSS入门 0x2 投影、不透明度

投影

简单css投影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>background-image</title>
        <style>
            .img-wrapper {
                background: url(./images/shadow.gif) no-repeat bottom right;
                clear: right;
                float: left;
                position: relative;
            }
            .img-wrapper img {
                background: #fff;
                border: 1px solid #a9a9a9;
                padding: 4px;
                margin: -5px 5px 5px -5px;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="img-wrapper">
            <img src="./images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard">
        </div>
    </body>
</html>

CSS入门 0x2 投影、不透明度

css3投影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>background-image</title>
        <style>
            img {
                box-shadow: 3px 3px 6px #666;
            }
        </style>
    </head>
    <body>
        <div class="img-wrapper">
            <img src="./images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard">
        </div>
    </body>
</html>

CSS入门 0x2 投影、不透明度

不透明度

css不透明度

.alert {
    background-color:#000;
    border-radius:2em;
    opacity:0.8;
    filter:alpha(opacity=80);/*IE浏览器*/
}

RGBa

.alert {
    background-color:rgba(0,0,0,0.8);/*alpha为十进制，代表透明度*/
    border-radius:2em;
}

png透明度

.img-wrapper div {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
    (src=='/img/shadow.png',sizingMethod='crop');
    backgrounnd:none;
}

CSS入门 0x2 投影、不透明度

投影

不透明度

相关推荐