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

最新推荐文章于 2022-07-30 15:56:51 发布

樊小书生

最新推荐文章于 2022-07-30 15:56:51 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签：布局 css3 图片

本文链接：https://blog.csdn.net/fxss5201/article/details/76598896

版权

CSS 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
background-attachment实现背景图片的定位

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

扫一扫