一、透明度设置
- opacity
用法:
opaticy:0-1;
2.rgba
用法:
rgba:(0-255,0-255,0-255,0-1)
透明度取值均为0-1之间。其中,0代表完全透明,1代表完全不透明。
注:若取值超出范围(小于0或大于1),那么会就近取合法值。如取1.2则按1显示,取负数按0显示。
举例:
html:
css:
(img)
我们将上例子中的opacity改为rgba再看
```
css:
.box1{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 1);}
.box2{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0.5);}
.box3{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0);}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JW0lzFqi-1583117743352)(https://i.loli.net/2020/03/01/Zr1d7BPEQ8MOsi3.png)]
二、透明度属性
仔细观察上面两个例子,会发现opacity设置为0时其内部的文字也不显示了,但是rgba设置为0其内部文字依然显示。
我们给元素设置opacity时,其内部元素会和父元素有同样的透明度,当父元素透明度为0时,其内部元素透明度均为0。
举例:
我们可以将opacity理解为元素变成一块透明玻璃,其值为0时全透明不可见,几块颜色不同的元素叠放在一起可以改变叠加部分的颜色。
千锋逆战班,等你来战。