这篇文章最后修改于 2022-01-21 日,距今已有 423 天,请注意甄别内容是否已经过时!
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
取值: 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>