通过对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学习—基础篇之基本数据类型(二)

    Python中重要的数据结构 1.列表 2.元组 3.字典 4.集合 列表 1.创建列表 # 方式一 name = [] print(type(name)) # 执行结果 >>> & ...

  2. concurrentHashMap求size

    在 JDK1.7 中,首先会使用不加锁的模式去尝试多次计算 ConcurrentHashMap 的 size,最多三次,比较前后计算的结果,结果一致就认为当前没有元素加入,计算的结果是准确的.如果不符 ...

  3. scikit_learn,NLTK导入分类器相关流程命令

  4. java程序启动redis报错ERR Client sent AUTH, but no password is set

    配置文件中注释掉password一句 重启程序即可

  5. 摘选改善Python程序的91个建议2

       62.metaclass stackflow          中文翻译    63.Python对象协议   https://zhuanlan.zhihu.com/p/26760180     ...

  6. linux 查看系统资源命令

    vmstat vmstat 1 3 #每隔一秒刷新3次 lsof lsof | more #process->file lsof | /sbin/init #file->process l ...

  7. docker 删除所有none的镜像

    docker images|grep none|awk '{print $3}'|xargs docker rmi

  8. docker--容器和镜像的导入导出及部署

    一.镜像导出 save 1.查看镜像 docker images 2.导出镜像 docker save -o test.tar image_name 或 docker save image_name ...

  9. python中的列表及numpy数组排序

    一.列表排序  # python中对列表排序有sort.sorted两种方法,其中sort是列表内置方法,其帮助文档如下:In [1]: help(sorted) Help on built-in f ...

  10. CentOS升级OpenSSL至OpenSSL 1.1.0f版本<其中有遇到libcrypto.so的问题>

    概述: 整体步骤如下: 1.先检查版本 2.进行安装 <安装采用源码安装,然后再做相关的链接指向> 一.检查当前环境 1. 查看当前版本 openssl version 或者使用 yum ...