CSS入门 0x2 投影、不透明度_css 白色布局投影-优快云博客

本文链接：https://blog.youkuaiyun.com/funkstill/article/details/88684268

博客主要介绍了CSS相关知识，包括简单CSS投影、CSS3投影，还提及了CSS不透明度，以及RGBa和png透明度等内容，聚焦于CSS在投影和不透明度方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

投影

简单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>

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不透明度

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