<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>37-背景缩写</title> <style> div{ /* 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>