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

最新推荐文章于 2025-10-28 14:25:41 发布

原创最新推荐文章于 2025-10-28 14:25:41 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS投影 #CSS不透明度 #CSS

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

CSS

29 篇文章

订阅专栏

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

投影

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