当前位置 : 主页 > 网页制作 > css >

css怎么降低背景透明度

来源:互联网 收集:自由互联 发布时间:2022-06-23
css降低背景透明度的方法:1、使用opacity属性,只需要给背景元素设置“opacity: 透明度值;”样式即可;2、使用filter属性,只需要给背景元素设置“filter: opacity(透明度值);”样式即可。

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>

1.png

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

2.png

(学习视频分享:css视频教程)

以上就是css怎么降低背景透明度的详细内容,更多请关注自由互联其它相关文章!

上一篇:怎么用css样式把图片改为灰色
下一篇:没有了
网友评论