[分享]css全屏背景图怎么设置

发布于 2024-11-11 15:44:12

CSS全屏背景图是实现网页视觉效果的重要手段之一，下面我们来详细介绍它的设置方法。在CSS中设置全屏背景图的基本语法如下：body { background: url(图片地址) norepeat c...

CSS全屏背景图是实现网页视觉效果的重要手段之一，下面我们来详细介绍它的设置方法。
在CSS中设置全屏背景图的基本语法如下：

body {
   background: url(图片地址) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

其中，background-size属性用于设置背景图片的尺寸，cover表示图片等比例缩放以完全覆盖容器框，也就是实现背景图片全屏显示，no-repeat表示不重复，center center表示背景图片在容器框中水平和垂直方向上居中，fixed表示背景图片随着页面滚动而固定不动，避免了在滚动页面时背景图片的重复或扭曲。
需要注意的是，浏览器支持的background-size属性可能不同，因此我们需要加上浏览器前缀以实现在不同浏览器中的兼容性。
完整代码如下：

<!DOCTYPE html>
<html>
<head>
   <title>全屏背景图实例</title>
   <style>
      body {
         background: url(bg.jpg) no-repeat center center fixed;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
      }
   </style>
</head>
<body>
   <h1>这是一个具有全屏背景图的网页</h1>
</body>
</html>

可以通过将图片地址替换为你自己的背景图片地址，来实现你想要的全屏背景图效果。
希望本文对你理解CSS全屏背景图的设置方法有所帮助！

css 教程