这是一个设置了背景色的网页。

当然，你也可以使用RGB或HSL值来定义颜色，选择更多。比如 background-color: rgb(240, 248, 255); 效果是一样的。

如何设置body标签的背景图片？

背景图片能让你的网页更生动。同样，你可以通过CSS来设置。

欢迎来到我的网站
这是一个设置了背景图片的网页。

这里的background-repeat: no-repeat;是为了防止图片在小屏幕上重复显示，显得杂乱。background-size: cover; 则让图片尽可能覆盖整个屏幕，可能会裁剪掉部分图片。你也可以选择 background-size: contain; 让图片完整显示，但可能会出现留白。

如何同时设置背景色和背景图片？哪个优先级更高？

可以同时设置背景色和背景图片。当图片加载失败或者图片是透明的时候，背景色就会显示出来。

在这个例子中，如果 transparent_background.png 图片是透明的，那么你就会看到灰色的背景。

如何优化背景图片加载速度？

背景图片如果太大，会影响网页的加载速度。可以考虑以下几点：

• 压缩图片： 使用在线工具或软件压缩图片，减少文件大小。
• 选择合适的图片格式： JPEG适合照片，PNG适合需要透明度的图片，WebP格式在保证质量的同时，文件更小。
• 使用CSS Sprites： 将多个小图片合并成一张大图，减少HTTP请求。虽然现在HTTP/2已经缓解了这个问题，但对于小图片来说仍然有效。
• 使用CDN： 将图片放在CDN上，利用CDN的缓存和加速功能。

如何让背景图片固定不动？

有时候，你可能希望背景图片固定不动，而不是随着滚动条滚动。可以使用background-attachment: fixed;。

这样，无论你如何滚动网页，背景图片都会固定在屏幕上，形成一种视差滚动效果。这在某些设计中非常有用。

终于介绍完啦！小伙伴们，这篇关于《HTML设置背景色和图片教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！