css中透明度rgba、opticy和显示隐藏display、visibility的区别

Her...

已于 2023-02-23 08:27:28 修改

阅读量593

点赞数

分类专栏： CSS 文章标签： css html5 css3 html 前端

于 2023-02-22 20:31:20 首次发布

本文链接：https://blog.csdn.net/weixin_48082900/article/details/129169102

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、透明度

1.rgba

R:红色值 G：绿色值 B：蓝色值 A:透明度：取值0~1之间，0就是完全透明，1完全不透明

rgba的透明的只对当前盒子有效，不会影响子盒子，对盒子里面的内容都不会有影响

代码示例：

<style>
/* rgba */
.rgbaBox {
width: 200px;
height: 200px;
background-color: rgba(30, 251, 1, 0.2);
color: royalblue;
}

.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>

<body>
<div class="rgbaBox">
<div class="box">rgba的子盒子</div>
</div>
</body>

2.opticy

语法：opticy：取值0~1之间，0就是完全透明，1完全不透明

子元素会继承父元素的 opacity 属性的值，opticy不仅会让盒子透明，盒子里面的内容也会一起透明

代码示例：

<style>
/* opticy */
.opticyBox {
width: 200px;
height: 200px;
background-color: blueviolet;
color: red;
opacity: 0.2;
}

.box {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>

<body>
<div class="opticyBox">
<div class="box">opticy的子盒子</div>
</div>
</body>

二、显示隐藏

1.display

display:none，表示隐藏元素

父元素设置display:none，所有子元素都会被隐藏，无论子元素设置什么值都不会生效，并且隐藏后的元素不占位置

代码示例：

<style>
/* display */
.displayBox {
width: 200px;
height: 200px;
background-color: blueviolet;
color: red;
display: none;
}

.box {
width: 100px;
height: 100px;
background-color: yellow;
}

.box2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>

<body>

<div class="displayBox">
<div class="box">display的子盒子</div>
</div>
<div class="box2">display下面的盒子</div>
</body>

2.visibility

visibility:hidden，表示元素不可见

父元素设置display:none，所有子元素都会被隐藏，但隐藏后的元素依然占位置

子元素设置visible后不受父级影响

代码示例：

<style>
/* visibility */
.visibilityBox {
width: 200px;
height: 200px;
background-color: green;
color: red;
visibility: hidden;
}

.box {
width: 100px;
height: 100px;
background-color: plum;
}

.box2 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>

<body>

<div class="visibilityBox">
<div class="box">visibility的子盒子</div>
</div>
<div class="box2">visibility下面的盒子</div>
</body>