demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
rgba:支持透明度的颜色(背景色/字体颜色等),并不会影响其子元素的透明度。
hsla: h色调(0-360) s饱和度(0%-100%) l亮度(0%-100%) a透明度(0-1)
*/
.out {
height: 400px;
width: 400px;
border: 1px solid #000;
background-color: rgba(255,0,0,0.3); /* rgba: 支持透明度的颜色,透明度不会影响其子元素 */
background-color: hsla(120,100%,50%,0.3); /* hsla 支持透明度的颜色,透明度不影响子元素 */
margin: 50px auto;
/*opacity: 0.4;*/ /* opacity会影响其所有子元素的透明度 */
}
.in {
height: 200px;
width: 200px;
border: 1px solid yellow;
background-color: blue;
margin: 100px auto;
opacity: 1; /* opacity会与其父元素的透明度叠加(与父元素的透明度相乘) */
/*background: transparent; */ /* 背景完全透明 */
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
