css怎么降低背景透明度

百变鹏仔 3个月前 (09-20) #CSS

文章标签透明度

css降低背景透明度的方法：1、使用opacity属性，只需要给背景元素设置“opacity: 透明度值;”样式即可；2、使用filter属性，只需要给背景元素设置“filter: opacity(透明度值);”样式即可。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css降低背景透明度

方法1：使用opacity属性

Opacity属性设置一个元素了透明度级别。从0.0（完全透明）到1.0（完全不透明）

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html><head><meta charset="UTF-8"><style type="text/css">#box{width: 300px;height: 300px;background-color: red;opacity: 0.4;}</style></head><body><div id="box"></div></body></html>

方法2：使用filter属性

filter 属性定义了元素的可视效果(例如：模糊与饱和度)。

opacity(%)可转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

<!DOCTYPE html><html><head><meta charset="UTF-8"><style type="text/css">#box{width: 300px;height: 300px;background-color: red;filter: opacity(0.3);}</style></head><body><div id="box"></div></body></html>

（学习视频分享：css视频教程）

文章推荐

css怎么降低背景透明度

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写