
<!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>