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>
实现结果如下(图片自己找)

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