CSS 半透明遮罩层
时间: 2023-08-08 18:09:10 浏览: 279
CSS实现半透明效果
您好!要实现 CSS 半透明遮罩层,可以使用 CSS 中的 `opacity` 属性和 `rgba()` 颜色值。
`opacity` 属性可以设置元素透明度,取值范围为 0-1,0 表示完全透明,1 表示完全不透明。
`rgba()` 颜色值可以设置颜色的 RGB 值和 alpha 值,其中 alpha 值表示透明度,取值范围也是 0-1,0 表示完全透明,1 表示完全不透明。
示例代码如下:
HTML:
```html
<div class="mask"></div>
```
CSS:
```css
.mask {
/* 定位 */
position: fixed;
top: 0;
left: 0;
/* 大小 */
width: 100%;
height: 100%;
/* 背景颜色 */
background-color: rgba(0, 0, 0, 0.5);
/* 透明度 */
opacity: 0.5;
/* 层级 */
z-index: 9999;
}
```
以上示例中,`.mask` 元素设置了 `position: fixed` 属性使其覆盖整个页面,设置了 `background-color` 属性为半透明的黑色,同时使用 `opacity` 属性设置其透明度为 0.5,从而实现了半透明的遮罩层效果。
阅读全文