background-attachment背景关联
- 设置背景图像是否固定或者随着页面的其余部分滚动
- scroll背景图片随页面的其余部分滚动,这是默认;
- fixed背景图像是固定的;
- 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背景关联