【css样式】设置页面背景图片相对于页面居中显示

约定不等于承诺〃 2024-03-16 21:04 11阅读 0赞

body {
        padding: auto;
        margin: auto;
        background-image: url();
        background-size: cover ;
        background-attachment: fixed ;
        background-position: center center;
    }

*  `background-repeat: no-repeat;`：确保背景图片不会重复平铺。
 *  `background-size: cover;`：使背景图片在保持其宽高比例的同时，尽可能覆盖整个背景区域。这样，无论页面的大小如何变化，背景图片都会根据页面的宽度或高度进行自动缩放和裁剪，以适应页面的大小。
 *  `background-size: contain;`：使背景图片在保持其宽高比例的同时完全显示在背景区域中。这样，背景图片的整体内容将被保留，并根据页面大小进行缩放。由于图像可能不填充整个背景区域，因此会出现空白区域。
 *  `background-position: center center;`：将背景图片相对于背景区域的横向和纵向中心位置对齐，确保背景图片始终居中显示。

`background-attachment` 是用来设置背景图片的滚动行为的 CSS 属性，它可以接受两个值：`fixed` 和 `scroll`。

*  `background-attachment: fixed;` 表示背景图片固定在视口中的位置，并且不会随页面的滚动而移动。这意味着即使用户滚动页面，背景图片也将保持不变。例如，当页面有内容滚动时，背景图片仍然固定在可视区域的相同位置。
 *  `background-attachment: scroll;` 表示背景图片随页面的滚动而移动。这是默认的属性值。当用户滚动页面时，背景图片会以与页面内容相对的速度滚动。如果页面有固定的高度，背景图片会完全显示并跟随内容的滚动。如果页面内容很长，背景图片可能只会显示一部分，并随着滚动而消失或重新出现。

因此，当设置 `background-attachment: fixed;` 时，背景图片会保持在固定位置而不随页面滚动而变化；而设置 `background-attachment: scroll;` 则允许背景图片随页面滚动而移动。