css加载一张图片 设置整个页面背景

前言

在css中，可以使用background-image或background属性来加载图片。这两个属性都可以配合url()函数来为元素设置背景图像。background-image属性为元素设置背景图像，而background是一个简化属性，可以在一个声明中设置所有背景样式，当然也包括背景图片。

一、常见的属性值

background-color：指定要使用的背景颜色

background-position：指定背景图像的位置

background-size：指定背景图片的大小

background-repeat：指定如何重复背景图像,一般设置no-repeat，表示不重复

background-origin：指定背景图像的定位区域

background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动

background-image：指定要使用的一个或多个背景图像

注意：元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像(background-image)位于元素的左上角，并在水平和垂直方向上重复。
 

以下是一个简单的例子，展示了如何使用CSS加载并显示一张图片：

二、style.css的样式文件 

        html {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background-image: url('../images/1.jpg'); /* 替换为你的图片路径 */
            background-position: center; /* 图片居中 */
            background-size: cover; /* 图片覆盖整个元素 */
            background-repeat: no-repeat; /* 不重复图片 */
            height: 100%; /* 高度设置为100% */
        }

这段代码将确保图片设置为整个页面的背景，并且图片会根据需要缩放以覆盖整个元素区域，保持图片的中心，不会重复。

三、使用CSS3属性background-attachment

background-attachment属性则用于将背景图片与元素一起滚动，如果希望背景图片完全占据整个屏幕，可以将该属性设置为fixed让其在屏幕上固定。
 

css代码写法

<style type="text/css">

        body {
            background-image: url("../images/1.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
        }
</style>

上面css代码的简化写法

        body {
            background: url("../images/1.jpg") no-repeat center fixed;
            background-size: cover;
        }