rgba()和 opacity 的透明效果有什么不同

最新推荐文章于 2023-08-24 11:24:30 发布

星Y

最新推荐文章于 2023-08-24 11:24:30 发布

阅读量337

点赞数

本文链接：https://blog.csdn.net/HIRAETHZY/article/details/115016150

版权

1. opacity
取值在0到1之间，0表示完全透明，1表示完全不透明

.test{
opacity: 0.5;
}

2.rgba
R表示红色，G表示绿色，B表示蓝色，三种颜色的值都可以是正整数或百分数。A表示Alpha透明度。取值0~1之间，类似opacity

.test{
background: rgba(0,0,0,0.5);
}

3.不同
rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）
eg:

 <style type="text/css">
    .test1 {
        width: 300px;
        height: 100px;
        background: black;
        opacity: 0.5;
    }

    .test2 {
        width: 300px;
        height: 50px;
        background: pink;
        font-size: 30px;
    }
</style>

<body>
    <div class="test1">
        <div class="test2">rgba和opacity的区别</div>
    </div>
           
</body>

在这里插入图片描述
给外面的div设置了opacity为0.5后，里面的div和文字的透明度都随之改变了。

 <style type="text/css">
    .test1 {
        width: 300px;
        height: 100px;
        background: rgba(0, 0, 0, 0.5);
    }

    .test2 {
        width: 300px;
        height: 50px;
        background: pink;
        font-size: 30px;
    }
</style>

<body>

    <div class="test1">
        <div class="test2">rgba和opacity的区别</div>
    </div>
           
</body>

在这里插入图片描述

星Y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rgba()和 opacity 的透明效果有什么不同

1. opacity取值在0到1之间，0表示完全透明，1表示完全不透明.test{opacity: 0.5;}2.rgbaR表示红色，G表示绿色，B表示蓝色，三种颜色的值都可以是正整数或百分数。A表示Alpha透明度。取值0~1之间，类似opacity.test{background: rgba(0,0,0,0.5);}3.不同rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色
复制链接

扫一扫