通过对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. iframe登录超时跳转登录页面

    1.可以在登录页面加jQuery验证 $(function () { //判断一下当前是不是做顶层,如果不是,则做一下顶层页面重定向 if (window != top) { top.location ...

  2. pyautogui 文档（四）：消息框功能

    消息框功能 PyAutoGUI利用PyMsgBox中的消息框函数提供跨平台的纯Python方式来显示JavaScript样式的消息框.提供了四个消息框功能: alert()函数 >>> ...

  3. Centos 6.5使用vsftpd配置FTP服务器教程

    Centos 6.5使用vsftpd配置FTP服务器教程什么是vsftpd vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序.特点是小巧轻快,安全易用.vsftpd 的名字代表”ver ...

  4. excel 上传读写到数据库

    <HTML> <div class="input-group"> <form id="abc" action="http ...

  5. java关于get/post请求

    package com.study.test; import java.io.BufferedReader;import java.io.IOException;import java.io.Inpu ...

  6. Excel uploading date format

    if l_wa_field-value eq 'ZFIRST_REQ_DATE'. clear lv_length. lv_length = strlen( l_wa_excel-value ). c ...

  7. dwr去除默认错误弹窗

    在开发中,我实在不希望dwr弹出alter,只需要打印错误日志就可以,客户端不需要alert出error或者a server error has occurred. 这样的提示,更不需要alert出堆 ...

  8. @RefreshScope 配置方法

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

  9. 记录一次网站邮箱（STMP）被恶意伪造事件

    网站运行了一段时间了,最近用户增加的比较多,突然有用户反馈说遇到骗子了,给我看了他跟骗子的邮件记录,发现骗子竟然可以用我们域名的邮件发邮件,真是被惊吓到了,赶紧开始查找问题. 首先怀疑是企业邮箱密码泄 ...

  10. javascript Hoisting变量提升

    1. 看人家举的两个例子,我认为这里的判断是否定义: !var 其实就是 指是否在函数function里面定义了.只有在funciton里面定义了了,js才hoist到最上面去找这个变量的值,否则就按 ...