前言
身为后端程序员的我在两名前端程序员休假时发现了网站页面的一些“小”问题，实在是看不下去，就尝试自己上手改bug。
main
问题
网站背景图片颜色太深，图片几乎和字一个颜色，就会导致看不清文字内容（当然，你肯CTRL+A全选查看文字我也没办法）。
因此，很多人想到的办法是设置背景图片透明度，我之前也掉进这个坑里了。然而如果你直接搜索“HTML如何设置网站背景图片透明度”的话，你会发现背景图片根本设置不了透明度（问chatgpt也没用）。
思路
其实我们可以把思路跳出来，想要清清楚楚看到文字，我们不妨可以联想到一个词：白纸黑字。好了，现在我相信很多人后清楚思路了：若想要看到黑色的文字，只需要把背景 白 化一点。（这个思路我也是好久才想出来的，所以心血来潮写一篇博客）
解决
核心代码
很好，现在思路清晰，直接上代码！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
body {
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)),url("your-image.png");
}
</style>
</head>
<body>
</body>
</html>
代码我只保留了可以体现出他原有的味道的一部分，这样也方便你们嵌套。
解释一下
第一个背景图层是一个线性渐变 (linear-gradient)，使用了两个颜色值 rgba(255, 255, 255, 0.5)。这个渐变从上到下从半透明的白色 (rgba(255, 255, 255, 0.5)) 渐变到半透明的白色 (rgba(255, 255, 255, 0.5))。这个半透明的白色背景图层在后续的叠加中会影响到底部的背景图层。
第二个背景图层是一个图片 (url(“your-image.png”))，其中 “your-image.png” 是你自己的图片文件路径（纯属废话）。这个图片背景图层会被渐变背景图层所覆盖。
通过这个设置，首先渐变背景图层被放置在顶部，然后图片背景图层叠加在渐变背景图层之上。图片背景图层将只在没有被渐变背景图层覆盖的地方显示出来。
废话一句
CSS的background属性可以接受多个值，它们以逗号分隔，并按照从后往前的顺序添加背景图层。这样可以实现多层次的背景效果。
尾言
提问一下，一般的网站开发前端后端人数比大多大约是多少a，我们这个网站开发前端后端的人数比是3:1，后端就我一个，还负责部分前端和前后端交互，感觉好累······
最后，因为我社恐，就不放网站效果图了。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
