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>
基本上就是利用网页选择器，去定位元素查看一些基本的element元素样式。如果遇到hover样式或者其他样式的话。可以点击右侧的hover即可展示，自己细心一点找一下就能找到。最后根据自己的项目修修补补颜色就好了，我也没有完全按照一些提供的主题去配色。完全根据自己的喜好去进行搭配，然后拖动颜色块去选择合适的颜色。
PS：贴一种一行代码实现dark主题的方案
html{
filter: invert(1) hue-rotate(180deg)
}
CSS filter 属性将模糊或颜色转移等图形效果应用到元素上。滤镜通常用于调整图像、背景和边框的渲染。
对于这种黑暗模式，我们将使用两个滤镜，即 invert 和 hue-rotate
invert滤镜可以帮助反转应用程序的颜色方案，因此，黑色变成了白色，白色变成了黑色，所有颜色也是如此。因此，黑变白，白变黑，所有颜色也是如此。
hue-rotate滤镜可以帮助我们处理所有其他非黑白的颜色。将色调旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱它的颜色。
1.hue就是color的意思只是hue是个更专业的说法。2.saturation就是指颜色的饱和度。3.value是指（色彩的）浓淡关系，敏感程度或（艺术作品的）明暗相称。4.shininess即亮度。5.transparency即透明度。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）