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

来源：互联网发布：cloudzoom.js 编辑：程序博客网时间：2024/06/16 07:23

我们在进行页面布局的时候经常会遇到将某个元素定位在屏幕的某个位置，这个时候我们会用到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>

阅读全文

0 0