HTMLHTML+CSS背景不随滚动条滚动

HTML CSS背景不随滚动条滚动

需求：

1. 背景全屏
2. 无论如何滚动，背景不随滚动条滚动

注意点：

• 必须设置宽高
• z-index 必须小于 1 ，不然会覆盖主体内容
• position: fixed; 必须用fixed属性值，让背景元素固定在界面。
• background-position: center; 显示背景中间部分
• background-size: cover; 宽高同比例缩小放大
• background-image 设置图片背景
• background-attachment: fixed; 图片固定于视口，不随背景滚动而滚动。

<style>
#m-bg {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  display:block;
}
</style>
<img id="m-bg" src="/publick/MeView/bg.jpg"/>

效果图

未滚动时

滚动时

这篇好文章是转载于：学新通技术网