H5 37-背景缩写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>37-背景缩写</title>
    <style>
        div{
            /*width: 500px;*/
            /*height: 500px;*/
            /*
            background-color: red;
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            background-position: left bottom;
            */
            /*background: red url(images/girl.jpg) no-repeat left bottom;*/
            /*background: red;*/
            /*background: url(images/girl.jpg);*/
        }

        body{
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            /*background-attachment: scroll;*/
            background-attachment:fixed;
        }
    </style>
</head>
<body>
<!--
1.背景属性缩写的格式
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

快捷键:
bg+ background: #fff url() 0 0 no-repeat;

2.注意点:
background属性中, 任何一个属性都可以被省略

3.什么是背景关联方式?
默认情况下背景图片会随着滚动条的滚动而滚动, 如果不想让背景图片随着滚动条的滚动而滚动, 那么我们就可以修改背景图片和滚动条的关联方式

4.如何修改背景关联方式?
在CSS中有一个叫做background-attachment的属性, 这个属性就是专门用于修改关联方式的

格式
background-attachment:scroll;

取值:
scroll 默认值, 会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动

快捷键:
ba background-attachment:;
-->

<div></div>
我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字
<br>
我是文字
<br>
我是文字
</body>
</html>

 

posted @ 2017-03-19 12:28  甘林梦  阅读(233)  评论(0编辑  收藏  举报