通过对background-attachment属性的学习，辨析每个属性值之间的区别。

1.fixed与scroll的区别　　

background-attachment:fixed;当滚动页面滚动条时背景图片位置保持不变。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 400px;

            height: 500px;

            /*overflow: scroll;*/

            /*background-color: #ccc;*/

            background-image: url("images/1.jpg");

            /*background-repeat: round;*/

            /*background-repeat: space;*/

            background-attachment: fixed;

            /*background-attachment: scroll;*/

            /*background-attachment: local;*/

        }

    </style>

</head>

<body>

    <div class="dv"></div>

    <p style="height:1800px"></p>

</body>

</html>

　　

background-attachment:scroll;当滚动页面滚动条时背景图片随着页面一起滚动（将之前代码的fixed改为scroll即可看到二者区别）。

2.scroll与local的区别（这个区别是相对于当前容器而非整个页面）

background-attachment:scroll;当滚动当前容器滚动条时背景图片位置保持不变

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 400px;

            height: 500px;

            overflow: scroll;

            /*background-color: #ccc;*/

            background-image: url("images/1.jpg");

            /*background-repeat: round;*/

            /*background-repeat: space;*/

            /*background-attachment: fixed;*/

            background-attachment: scroll;

            /*background-attachment: local;*/

        }

    </style>

</head>

<body>

    <div class="dv"><span style="height:800px;display:block"></span></div>

    <p style="height:1800px"></p>

</body>

</html>

　　注意：让容器有滚动条效果需加上overflow:scroll;

background-attachment:local;当滚动当前容器滚动条时背景图片随内容滚动（将之前代码的scroll改为local即可看到二者区别）。

background-attachment属性的更多相关文章

  1. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  2. background复合属性详解（上）：background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  3. background系列属性

    1.background-color背景颜色属性 ①颜色表示方法 英语单词:red   blue   purple    skyblue. rgb:r代表红色   g代表绿色   b代表蓝色    也 ...

  4. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  5. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  6. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  7. background相关属性

    background-origin: 规定 background-position 属性相对于容器的哪一部分来定位. padding-box 背景图像相对于内边距框来定位:(默认) border-bo ...

  8. background——背景属性

    一.背景属性 1.1.背景颜色background-color <style> /*浮动,横向排列*/ div{float: left;} /*background-color属性值支持三 ...

  9. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  10. css详解background八大属性及其含义

    background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...

随机推荐

  1. Exp3 免杀原理与实践 20165110

    Exp3 免杀原理与实践 20165110 一.. 实践内容 1.正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分),veil-evasion(0.5分),加壳工 ...

  2. QT Designer基础——登录界面设计基础版2

    认识QT Designer提供的可选控件:以下八个大类 Layouts:布局相关 Spacers:留空 Buttons:可点击的按钮类 Item Views和 Item Widgets:高级控件,例如 ...

  3. web前端面试题题目

    一.各种浏览器兼容的前缀:-o-(Opera),-ms-(IE): -moz-(火狐):-webkit-(chrome) 二.存在兼容性的css属性:placeholder,主要是因为各种浏览器pla ...

  4. Python基础-文件操作（七）

    一.文件基本操作 1.open 打开模式: w模式 写模式write 文件不存在时会创建文件,如果文件已存在则会清空文件 r模式 读模式read 文件不存在就报错,存在则准备读取文件 a模式 追加模式 ...

  5. 生成器函数yield

    先看一个栗子: # -*- coding:UTF-8 -*- __autor__ = 'zhouli' __date__ = '2018/12/6 21:08' # 生成器函数,函数里只要有yield ...

  6. 解决在vscode中eslint在vue后缀文件中保存时无法自动格式化的问题

    在setting.json中加入如下内容 { "eslint.autoFixOnSave": true, "eslint.validate": [ " ...

  7. nio实现原理

    nio是事件驱动,当soket有消息过来时才开启线程,bio每当有连接时,就开启一个线程,长连接的话,就有太多的空闲连接占用线程内存 nio是非阻塞长连接 ServerSocketChannel:饭店 ...

  8. swift两种获取相册资源PHAsset的路径的方法（绝对路径）

    方法中使用到的phasset就是我们取到的PHAsset对象 方法一: let options = PHVideoRequestOptions() options.version = PHVideoR ...

  9. jquery 上下文菜单实现

    话不多说,直接贴上官方demo演示: https://swisnl.github.io/jQuery-contextMenu//demo

  10. 当Vue中img的src是动态渲染时不显示问题

    最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如 ...