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>
巴特西

H5 37-背景缩写

最新文章

热门文章
