html给背景图片设置透明度的方法有2种
1、使用opacity属性,给设置背景图片的元素添加“opacity:透明度值”样式即可;
属性值从 0.0 到 1.0。值越小,越透明
示例:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
width: 300px
height: 300px
background-image: url(img/3.jpg)
}
.box{
opacity: 0.5
}
</style>
</head>
<body>
<div>背景图片</div>
<div class="box">背景图片</div>
</body>
</html>
2、使用filter属性,给设置背景图片的元素添加“filter: opacity(透明度值)”样式即可
filter属性定义了元素(通常是)的可视效果(例如:模糊与饱和度);
2.1 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
属性值代表的意义:
grayscale灰度
sepia褐色(有种复古的旧照片感觉)
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影
示例:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
width: 300px
height: 300px
background-image: url(img/3.jpg)
}
.box{
filter: opacity(0.6)
}
</style>
</head>
<body>
<div>背景图片</div>
<div class="box">背景图片</div>
</body>
</html>
html和css一起才好用~,\x0d\x0a你说的这个需要提到CSS3支持的颜色表达RGBA\x0d\x0a之前所有的不管是16进制颜色还是RGB都是全色没有透明通道\x0d\x0aRGBA是RGB的升级,指Red,Green,Blue,Alpha(透明度),比如设置背景色:\x0d\x0ahahaha\x0d\x0a\x0d\x0a给CSS加进去样式表\x0d\x0a\x0d\x0a\x0d\x0adiv.test{\x0d\x0apadding:20px\x0d\x0amargin:10opx\x0d\x0abackground-color:rgba(10%,20%,30%,0.3)//红绿蓝颜色配比,不透明度30%\x0d\x0a}\x0d\x0a\x0d\x0a这就是了,其他的支持#16进制的地方基本上也都可以换上这个表示。\x0d\x0a兼容性我不太清楚,你可以到w3school上查找浏览器兼容信息。 回答于 2022-11-16