Web全栈-背景缩写 | 易学教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景缩写</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>
来源：https://www.cnblogs.com/yindanny/p/11674839.html
标签
background
滚动条