当父元素设置为position:fixed时,对子元素设置background-attachment:fixed,可以使子元素的背景图片随着页面滚动而滚动,并且不受父元素滚动的影响。代码示例如下:
HTML代码:
CSS代码:
.parent {
position: fixed;
background-image: url("parent_bg.jpg");
background-attachment: fixed;
}
.parent .child {
background-image: url("child_bg.jpg");
background-attachment: fixed;
}
注:上述代码中,.parent为父元素的样式,.child为子元素的样式。子元素可以嵌套在父元素内,此时子元素的背景图片会覆盖父元素的背景图片。