您的位置：首页 > 其它

background-attachment实现背景图片的定位

2017-08-02 21:38 323 查看

我们在进行页面布局的时候经常会遇到将某个元素定位在屏幕的某个位置，这个时候我们会用到position:fixed；在很多页面上我们会看到一种特效就是页面滚动的时候，图片定位在原来的地方，然后会有一些布局的页面经过之后图片更改的效果（我将其称之滚动切图）。这种效果就用到今天要主要说的一种属性background-attachment。

先看一下background-attachment的用法：

background-attachment – 定义背景图片随滚动轴的移动方式；取值:

scroll | fixed | inherit


取值	解释
scroll	随着页面的滚动轴背景图片将移动
fixed	随着页面的滚动轴背景图片不会移动
inherit	继承

下面这个例子就是使用background-attachment简单实现的滚动切图的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.content1,.content2,.content3 {
width: 100%;
height: 550px;
}
.content1 {
background: url(http://img.blog.csdn.net/20170802213437530?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnhzczUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast);
background-size: cover;
background-position: center 0;
background-attachment: fixed;
}
.content2 {
background: url(http://img.blog.csdn.net/20170802213504014?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnhzczUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast);
background-size: cover;
background-position: center 0;
background-attachment: fixed;
}
.content3 {
background: url(http://img.blog.csdn.net/20170802213533089?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnhzczUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast);
background-size: cover;
background-position: center 0;
background-attachment: fixed;
}
.body {
width: 100%;
height: 500px;
background: blue;
text-align: center;
line-height: 500px;
font-size: 26px;
color: #fff;
}
</style>
</head>
<body>
<div class="content1"></div>
<div class="body">见证奇迹的时刻</div>
<div class="content2"></div>
<div class="body">见证奇迹的时刻</div>
<div class="content3"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航