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 属性,它可以接受两个值:fixedscroll

  • background-attachment: fixed; 表示背景图片固定在视口中的位置,并且不会随页面的滚动而移动。这意味着即使用户滚动页面,背景图片也将保持不变。例如,当页面有内容滚动时,背景图片仍然固定在可视区域的相同位置。

  • background-attachment: scroll; 表示背景图片随页面的滚动而移动。这是默认的属性值。当用户滚动页面时,背景图片会以与页面内容相对的速度滚动。如果页面有固定的高度,背景图片会完全显示并跟随内容的滚动。如果页面内容很长,背景图片可能只会显示一部分,并随着滚动而消失或重新出现。

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

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐