The difference between transparency rgba, opticy and show hidden display, visibility in css

1. Transparency

1.rgba

R: red value G: green value B: blue value A: transparency: the value is between 0 and 1, 0 is completely transparent, 1 is completely opaque

The transparency of rgba is only valid for the current box, it will not affect the sub-boxes, and will not affect the contents of the box

Code example:

<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 sub-box</div>
</div>
</body>

2.opticy

Syntax: opticy: the value is between 0 and 1, 0 is completely transparent, 1 is completely opaque

The child element will inherit the value of the opacity attribute of the parent element, opticy will not only make the box transparent, but also the content inside the box

Code example:

<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>

2. Show and hide

1.display

display:none, means hidden elements

If the parent element sets display:none, all child elements will be hidden, no matter what value is set for the child element, it will not take effect, and the hidden element will not occupy the position

Code example:

<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 sub-box</div> </div>
<
div class="box2">display below box</div>
</body>

2.visibility

visibility:hidden, indicating that the element is not visible

If the parent element sets display:none, all child elements will be hidden, but the hidden elements still occupy the position

After the child element is set to visible, it will not be affected by the parent

Code example:

<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">sub-box of visibility</div> </div>
<
div class="box2">below visibility box</div>
</body>

The difference between transparency rgba, opticy and show hidden display, visibility in css

Guess you like