用css设置背景图片占全屏的正确打开方式

想要实现在网页背景中放置一张图片占满整个屏幕的效果吗？使用 CSS 就是一种非常简单易用的方法。本文将介绍如何使用 CSS 来设置背景图片占满整个屏幕，同时不重复显示。

[CSS] 纯文本查看 复制代码

body {
background-image: url('image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

上述代码使用了三个关键字来控制背景图片的显示：background-image、background-size 和 background-repeat。

background-image: 设置背景图片的 URL。
background-size: 这一属性被用来将背景图片的大小缩放到适合整个屏幕。具体而言，cover 选项会将图片放大或缩小到完整地覆盖整个屏幕，而同时保持水平和垂直方向的整个图片完全可见。
background-repeat: 如果背景图片原尺寸过小，则有可能会重复出现，导致不美观。使用 no-repeat 选项，可以避免这种情况。
background-position: 该属性用来设置背景图片的位置。在这里，选项 center center 表示将背景图片的中心点居中在整个屏幕中间。
使用上述 CSS 代码，你可以在你的网页中轻松地将任何你喜欢的图片占满整个屏幕，并确保不会出现令人不愉快的重复效果。