background-attachment背景关联

珠峰HTML|CSS精讲视频 admin 387浏览

background-attachment背景关联

  1. 设置背景图像是否固定或者随着页面的其余部分滚动
  2. scroll背景图片随页面的其余部分滚动,这是默认;
  3. fixed背景图像是固定的;
  4. inherit指定background-attachmentI的设置应该从父元素继承
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style style="text/css">
*{
margin: 0;
padding: 0;
}
.banner1,.banner2,.banner3{
width:100%;
height:800px;
background-repeat: no-repeat;
}
.banner1{
background: url(https://mobike.com/cn/assets/themes/moby/img/landing/hero-bg-3.jpg);
}
.banner2{
background: url(https://mobike.com/cn/assets/themes/moby/img/landing/hero-bg-6.jpg);
background-attachment: fixed;
}
.banner3{
background: url(https://mobike.com/cn/assets/themes/moby/img/landing/hero-bg-7.jpg);
}
</style>
</head>
<body>
<div class="banner1"></div>
<div class="banner2"></div>
<div class="banner3"></div>
</body>
</html>

转载请注明:大灰牛博客 » background-attachment背景关联