CSS中background-attachment的介绍和用法

最新推荐文章于 2024-09-23 11:29:29 发布

要不你把我删了吧

最新推荐文章于 2024-09-23 11:29:29 发布

阅读量1.6k

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_45752177/article/details/122381368

版权

本文详细介绍了CSS属性`background-attachment`的使用，该属性用于控制网页滚动时背景图片的行为。当设置为`fixed`时，背景图片会固定在视口位置，即使元素滚动，图片位置依然不变。而`scroll`则是默认值，图片随元素滚动。通过实例展示了在一个高度大于浏览器可视高度的div中，如何应用这两个属性改变背景图片的滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

background-attachment可以设置在网页滚动时背景图片是否随着网页一起滚动，当一个盒子的高度足够大时，网页会产生滚动条，此时可以使用background-attachment属性来设置这个盒子的背景图片是否随着盒子一起滚动，background-attachment有两个属性值:fixed和scroll,使用fixed可以让背景图固定在当前相对于网页的位置；比如一个div的高度为2000px,给这个盒子设置一个背景图片（背景图片高度小于当前浏览器的可视高度），当盒子滚动时，背景图片的位置保持不变（相对于盒子滚动前的位置），

#box1{

width: 100%;

height: 2000px;

background-image: url(https://img2.baidu.com/it/u=2775440825,3201981130&fm=253&fmt=auto&app= 138&f=JPEG?w=750&h=500);

background-attachment: fixed;

background-repeat: no-repeat;

background-size: 100% auto;

}

另外一个属性值是scroll，使用此属性值会使图片随着盒子一起滚动（默认效果，不加这条属性背景图片默认跟着父盒子一起滚动）。