您好!欢迎来到静学网! 注册 登入
  • 致力提供中国优质教程及自媒体资讯,打造中国品牌教育先锋。

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

课程目录 admin 次浏览
如果大家认真观察一些网站的一些页面,我们会发现在网页滚动过程中,有些会有一张背景图固定住,而不会随着滚轮滚动而滚动,这种网页设计会给人一种空间感的感觉,这更能体现出网页的整体设计效果,让人感觉这个网页比较上档次,那么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>
 
实现结果如下(图片自己找)
 
 background-attachment 

注意事项

 
1 如果你想看到背景不随滚轮滑动,必须用fixed置;
2 如果用的是scroll,那么你将看不到效果
3 其他实现方法,比如利用position及float来进行定位,不过貌似这个比较难办到。
 



静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明[css教程]' background-attachment属性'是什么意思?这个用处可大了
顶一下
(0)
踩一下
(0)
畅所欲言
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论
友情链接:
自学网
本网站所刊载信息,不代表静学网观点。 刊用本网站稿件,务经书面授权或注明来源。 未经授权禁止转载、摘编、复制及建立镜像,违者将依法追究法律责任。 投稿邮箱:1870447831@qq.com | 举报邮箱:1870447831@qq.com