欢迎访问我的的博客,网站主要用于记录学习WEB语言|CMS建站|SEO优化及日常工作常见问题总结!
您的位置:主页 > HTML/CSS >

background-attachment背景关联

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-size设置背景图像的尺寸大小
下一篇标题:background-position背景定位

相关文章

 

文章-background-attachment背景关联发布日期:2021-04-01 17:03作者:admin
如需转载,请注明文章出处和来源网址:https://www.dhnblog.com/htmlcss/241.html