本文约 700+ 字，整篇阅读约需 1 分钟。
逐日分享一段优质代码片段。
本日禀享一段 CSS 代码片段，利用 CSS 设置网页全屏背景图片，很大略。
老规矩，先阅读代码片段并思考，再看代码解析再思考，末了评论区留下你的见地！
html {background: url('images/bg.jpg') no-repeat center center fixed;background-size: cover;-webkit-background-size: cover; / 适用于旧版 WebKit 浏览器 /-moz-background-size: cover; / 适用于旧版 Firefox 浏览器 /-o-background-size: cover; / 适用于旧版 Opera 浏览器 /}分享缘故原由
这段代码展示了如何利用 CSS 设置网页全屏背景图片，使其在不同浏览器中都能完美适应屏幕尺寸。
这对付创建具有视觉吸引力且兼容性良好的网页非常主要。
代码解析
1. background: url('images/bg.jpg') no-repeat center center fixed;
background：简写属性，用于设置所有背景属性。
url('images/bg.jpg')：指定背景图像的路径。
no-repeat：背景图像不重复显示。
center center：背景图像在水平方向和垂直方向都居中显示。
fixed：背景图像固定在视口中，纵然页面滚动，背景图像也不会移动。
2. background-size: cover;
background-size: cover：使背景图像按比例缩放，以完备覆盖背景区域。这意味着图像可能会被裁剪以适应容器。
3. 浏览器前缀的利用
-webkit-background-size：适用于旧版 WebKit 浏览器（如旧版 Safari 和 Chrome）。
-moz-background-size：适用于旧版 Firefox 浏览器。
-o-background-size：适用于旧版 Opera 浏览器。
这些浏览器前缀用于处理旧版浏览器的兼容性问题。虽然当代浏览器大多已经支持标准的 background-size 属性，但在代码中加入这些前缀可以确保在老旧浏览器中也能正常显示背景图片。
- end -
