CSS透明度[简述]

最新推荐文章于 2024-04-26 19:17:54 发布

不会写代码的菜

最新推荐文章于 2024-04-26 19:17:54 发布

阅读量1.6k

点赞数 2

分类专栏： css 文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_52629592/article/details/125363468

版权

css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

CSS透明度

CSS中设置透明度有两种方式:
GRBA和opacity.
下面我们就这两种方式进行简要介绍:

GRBA

语法如下:
```
rgba(R,G,B,A);
```

rgba只是单纯的设置颜色的透明度,但是标签上的文字不会透明. 即透明元素的子元素不会继承其透明效果.

代码示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        
            .c1{
                background: rgba(255,255.0,1);
            }
            .c2{
                background: rgba(255,255,0,0.3);
            }
        </style>
    </head>
    <body>
        
        <div class="c1">这是一个div这是一个div</div>
        <div class="c2">这是一个div这是一个div</div>
    </body>
</html>

运行结果:
我们可以看到,使用grba方法只是颜色发生了变化,两个div的文字都没有改变

opacity

语法如下:
```
opacity: value;
```
其中,value的取值为[0~1].

opacity属性具有继承性,因此会使得容器中所有的元素都具有透明度.所以我们设置的字体也会变为透明

代码示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .i1,.c1{
                /* opacity 设置透明效果 */
                opacity: 1;
            }
            .i2,.c2{
                /* opacity 设置透明效果 */
                opacity: 0.35;
            }
            /* .c1{
                background: rgba(255,255.0,1);
            }
            .c2{
                background: rgba(255,255,0,0.3);
            } */
        </style>
    </head>
    <body>
        <img src="img/背景2.jpg" class="i1">
        <img src="img/背景2.jpg" class="i2">
        <div class="c1">这是一个div这是一个div</div>
        <div class="c2">这是一个div这是一个div</div>
    </body>
</html>

运行结果如下:
我们可以看到使用opacity方法,也可以使文字变得透明

不会写代码的菜

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS透明度[简述]

CSS中设置透明度有两种方式: GRBA和opacity. 下面我们就这两种方式进行简要介绍:语法如下: rgba只是单纯的设置颜色的透明度,但是标签上的文字不会透明. 即透明元素的子元素不会继承其透明效果.代码示例如下: 运行结果: 我们可以看到,使用grba方法只是颜色发生了变化,两个div的文字都没有改变语法如下: 其中,value的取值为[0~1].opacity属性具有继承性,因此会使得容器中所有的元素都
复制链接

扫一扫