通过对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. Python设计模式 - UML - 对象图(Object Diagram)

    简介 对象图和类图的基本概念是类似的,可以看作类图在系统某一时刻的镜像,显示了该时刻系统中参与交互的各个对象以及它们之间的关系. 对象图的元素包括对象.链接.包,元素之间的关系和类图相似. 对象图建模 ...

  2. PHP的ob_flush()与flush()区别

    PHP的ob_flush()与flush()区别 标签: php ob-flush flush buffer 2017年03月24日 17:50:393248人阅读 评论(0) 收藏 举报  分类: ...

  3. java第四章接口

    接口(interface) 语法:修饰符 interface 接口名 extends 父接口1,父接口2....{ //常量定义   //方法定义} class 类名 extends 父类名 impl ...

  4. VS下.net开发常用扩展、配置

    Vue.js Pack Copy As Html HTML Tools Word Highlight With Margin 绿豆沙颜色:R:199  G:237  U:204

  5. 编写高效的 CSS 选择器

    高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...

  6. 【Spring学习】Spring的源码解析之路

    缘起:=====>>>> 在项目中实际上是用到了Spring的内容,只是直接用的SpringBoot,不管是Eclipse中还是在Intellig IDEA中,应该都比较容易能 ...

  7. UIButton设置UIControlContentHorizontalAlignment调整文字对齐方式

    UIButton 继承自UIControl,所以可以对UIControlContentHorizontalAlignment进行设置 btn.setImage(UIImage.init(named: ...

  8. nginx访问502 gateway，*1 connect() failed (111: Connection refused) while connecting to upstream

    安装好nginx,php环境后,配置虚拟主机,结果访问后就报502 gateway,查看日志文件后,显示错误如下: 2019/04/29 16:24:39 [error] 19433#19433: * ...

  9. angular ViewChild ContentChild 系列的查询参数

    官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...

  10. Thread类与Runnable接口的深入理解

    Thread类与Runnable接口的深入理解1.Thread类实现了Runnable接口,实现run方法,其中target参数对应的就是一个Runnable接口的实现类 @Override publ ...