CSS中的透明度设置

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

猎剑

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

阅读量4.9k

点赞数 1

文章标签：前端开发 CSS3

本文链接：https://blog.csdn.net/weixin_42393089/article/details/95739993

版权

CSS3中透明度设置

1.两种设置方式

语法

background-color：rgba(r,g,b,a)；

r:红
g：绿
b:蓝
a:透明度

background-color:rgb(r,g,b)
opcity:0.5;

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中透明度设置</title>
    <style>
        /*不设置透明度*/
        .box1{
            background-color:rgb(217, 107, 116);
            font-size: 36px;
        }
        /*透明度为0.5*/
        .box2{
            background-color:rgba(217, 107, 116,0.5);
            font-size: 36px;
        }
        /*透明度为0.5*/
        .box3{
            background-color:rgb(217, 107, 116);
            font-size: 36px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div class="box1"> 曾经的照片还留在那个房间</div>
<div class="box2"> 曾经的照片还留在那个房间</div>
<div class="box3"> 曾经的照片还留在那个房间</div>

</body>
</html>

在这里插入图片描述

2. 两者区别

opticy设置的透明度会把其所有内容和元素都设置为透明的，rgba设置的透明度只会把设置为该属性所对应的操作设置为透明的。

猎剑

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS中的透明度设置

CSS3中透明度设置1.两种设置方式background-color：rgba(r,g,b,a)；r:红g：绿b:蓝a:透明度background-color:rgb(r,g,b)opcity:0.5;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...
复制链接

扫一扫