css背景不随屏滚动

2023-12-24 18:30:02 举报文章

CSS中的背景是可以随着屏幕的滚动而移动的,但有时候我们需要固定背景不随屏滚动,这时候就要使用CSS的background-attachment属性。

background-attachment有两个值:scroll和fixed。scroll是默认值,表示背景随着屏幕滚动,而fixed则表示背景固定不动,即使页面滚动也不会改变背景的位置。

body {
  
   
   background-image: url(bg.jpg);
  
   
   background-repeat: no-repeat;
  
   
   background-attachment: fixed;
  
}
 

在上面的代码中,我们将body的背景图片设置为bg.jpg,然后将background-attachment属性设置为fixed,这样就可以固定背景不随屏滚动了。

需要注意的是,固定背景可能会导致页面出现滚动条,因为背景不会随着内容的滚动而移动,所以页面总高度会超过屏幕高度。

总之,如果你需要让背景固定不动,可以试试使用background-attachment: fixed属性。

如果你认为本文可读性较差,内容错误,或者文章排版错乱,请点击举报文章按钮,我们会立即处理!