[css教程]' background-attachment属性'是什么意思?这个用处可大了

如果大家认真观察一些网站的一些页面，我们会发现在网页滚动过程中，有些会有一张背景图固定住，而不会随着滚轮滚动而滚动，这种网页设计会给人一种空间感的感觉，这更能体现出网页的整体设计效果，让人感觉这个网页比较上档次，那么background-attachment怎么用呢？下面我们一起来实现这个属性。

background-attachment属性的定义和用法

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment属性值汇总

scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。

代码实现过程

<!DOCTYPE html>
<html>
<head>
         <title>css教程</title>
         <style type="text/css">
                   .zhez{
                            width: 100%;
                            height: 500px;
                            background-color: #ccc;
                   }
                   .kongbai{
                     width: 100%;
                      height: 500px;
           background-color: rgba(0,0,0,0.8);
           opacity: 0.8;
 
                   }
                   body {
    display: block;
    margin: 0px;
}
         </style>
</head>
<body style="background-image: url(OIP.JPG);background-repeat: no-repeat;background-size:1920px 600px; background-attachment: fixed;">
     <div class="zhez">遮罩</div>
     <div class="zhez">遮罩</div>
     <div class="zhez">遮罩</div>
     <div class="kongbai">遮罩</div>
     <div class="zhez">遮罩</div>
</body>
</html>

实现结果如下(图片自己找)