1、使用背景图片透明类型:
首先，在html文件中添加 <style>标签，然后使用CSS的filter属性,让图片的背景变成半透明或完全透明：
<style>
body {
background-image: url(“image.jpg”) // 设置图片背景
filter: alpha(opacity=50) // 透明度50%
opacity: 0.5 // 设置透明度
}
</style>
2、使用<div>标签来实现:
用<div>标签来将背景图片和文本分开，为<div>设置背景图片，利用CSS的 opacity 属性来控制其透明度：
<div class="background-image">
<p>这里是文本内容</p>
</div>
<style>
.background-image {
background-image: url(“image.jpg”)// 设置背景图片
opacity: 0.5 // 设置透明度
}
</style>
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>
使用rgba就可以了，background: rgba(255, 255, 255, 0.5)
前面的是三原色，后面的是透明度，0.5就是半透明，
例如
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）