这篇文章最后修改于 2022-01-21 日,距今已有 423 天,请注意甄别内容是否已经过时!
描述
repeat默认。背景图像将在垂直方向和水平方向重复。
repeat-x背景图像将在水平方向重复。
repeat-y背景图像将在垂直方向重复。
no-repeat背景图像将仅显示一次。
inherit规定应该从父元素继承 background-repeat 属性的设置。
background-attachment :定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承初始值: scroll
继承性: 否
适用于: 所有元素
body {
    background-image: url(https://for.886a.top/wp-content/uploads/2021/05/内衬纸.png); 

    background-repeat: repeat;
    background-attachment:fixed;
}
ps: 参考以下修修改
body {
    background-image: url(../images/bakimg.jpg); 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment:fixed;
}
background不随浏览器滚动的代码如下:

CSS代码
body { background:url(背景图片地址) no-repeat fixed center top; margin:0; padding:0; } 
只需要一个核心代码就实现了背景不随浏览器滚动,兼容了IE6+浏览器, 其核心代码为:
background-attachment: fixed;
无论滚动条如何拖动,背景图片始终牢牢固定在页面上。

IE6浏览器实现背景不随浏览器滚动的代码:

JavaScript代码
<script type="text/javascript">var scrollBackground = true;</script>