通过对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. 认识socket

    socket socket也称套接字,网络编程的基础.一般情况下我不喜欢直接去说socket的函数都是怎么用的,那个很多人都写出来了,而且肯定比我好的有的是. 但是今天想写的是我的理解中,产生sock ...

  2. @RefreshScope 配置方法

    <dependencies> <dependency> <groupId>org.springframework.cloud</groupId> < ...

  3. pytesseract在识别只有一个数字的图片时识别不出来

    大家好,近期在做自动化测试时,遇到了一个问题需要通过识别图片来实现,遂用到了pytesseract模块和tesseract-ocr这个工具.在使用过程中发现,识别带有数字的图片时,如果这个图片上仅有一 ...

  4. oracle错误（ORA:12154 ORA:01034 和 ORA:27101 ORA-18008 ORA-01081）

    按照正常操作流程,启动项目,发现项目报错,原因是连接不上oracle数据库, PLSQL连接时报错,错误码  ORA:12154 无法解析指定的连接标识符 第一次,遇到这个错误,在网上找了资料都是需要 ...

  5. Oracle启动和停止

    概述 只有具备sysdba和sysoper系统特权的用户才能启动和关闭数据库. 在启动数据库之前应该启动监听程序,否则就不能利用命令方式来管理数据库,包括启动和关闭数据库. 虽然数据库正常运行,但如果 ...

  6. iframe和form表单实现ajax请求上传数据

    form的target属性设置为iframe的name值时,表示提交到url后返回的数据显示到iframe区域 <form action="/upload.html" met ...

  7. 洛谷 P1338 末日的传说

    题目链接:https://www.luogu.org/problemnew/show/P1338 题目描述 只要是参加jsoi活动的同学一定都听说过Hanoi塔的传说:三根柱子上的金片每天被移动一次, ...

  8. tomcat 请求处理流程分析（基于nio）

    在这里我先简单的说下bio和nio的区别 这里我以电话客服的情况来解释 bio 一个客户对应一个客服, 假如客户比较麻烦,中途不挂电话,或者去做其他事情了,而客服资源会被一直占用 导致的后果是系统处理 ...

  9. 移动端使用fastclick时，模拟原生浏览器对象

    移动浏览器原生click事件有300ms的延时,这是浏览器为了区分到底是双击还是单击事件.(实际上有些移动浏览器不支持双击事件.PC版chrome在手机模式下,当禁止用户双击缩放页面时(即有viewp ...

  10. 重置表单中的文件上传控件(file input)的方法

    方法一: 调用所在 form 表单的 reset 方法,这个方法的缺点是会把整个表单重置,需要存储表单的状态,再回填回去 方法二: 使用jQuery,代码为: $("#id").r ...