1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             width: 220px;
    9.             height: 60px;
    10.             line-height: 60px;
    11.             background-color: transparent;
    12.         }
    13.     </style>
    14. </head>
    15. <body>
    16.     <!--背景颜色
    17.         background-color: 颜色;//transparent(默认)
    18.     -->
    19.     <div>
    20.         我是div
    21.     </div>
    22. </body>
    23. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             width: 500px;
    9.             height: 500px;
    10.             background-image: url("./images/bg.jpg");
    11.         }
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--背景图片
    16.         background-image: url("图片地址");
    17.                           none：默认值
    18.     -->
    19.     <div>
    20.         我是div
    21.     </div>
    22. </body>
    23. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         body{
    8.             background-image: url("./images/bg.jpg");
    9.             background-repeat:repeat-x;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14.     <!--背景重复
    15.         background-repeat:值;
    16.         值：
    17.             repeat      重复(默认)
    18.             no-repeat   不重复
    19.             repeat-x    横向重复
    20.             repeat-y    纵向重复
    21.     -->
    22. </body>
    23. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             width: 500px;
    9.             height: 200px;
    10.             background-color: skyblue;
    11.             background-image: url("./images/bg.jpg");
    12.             background-repeat: no-repeat;
    13.             background-size: 400px 100px;
    14.             background-size: contain;
    15.         }
    16.     </style>
    17. </head>
    18. <body>
    19.     <!--背景尺寸    background-size: 宽度 高度;
    20.         contain：把背景图片扩展到最大尺寸，使宽度或高度完全适应内容区域
    21.         cover：把背景图片扩展至足够大，使背景图片完全覆盖区域，背景图片的某些区域会被覆盖
    22.         当只设置一个值时，另一个值会赋值为auto
    23.     -->
    24.     <div></div>
    25. </body>
    26. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             width: 800px;
    9.             height: 600px;
    10.             background-color: skyblue;
    11.             background-image: url("./images/bg.jpg");
    12.             background-repeat: no-repeat;
    13.             background-position: right bottom;
    14.         }
    15.     </style>
    16. </head>
    17. <body>
    18.     <!--背景定位    background-position: 值1(水平方向) 值2(垂直方向);
    19.         1.方向定位：top bottom right left center 只设置一个值时，另一个值是center
    20.         2.尺寸定位：参考位置是背景图片左上角与元素左上角水平垂直距离，设置一个值时，这个值一定是水平位置
    21.         3.百分比定位：0% 0% 图片在左上角    50% 50% 图片水平垂直居中  100% 100% 图片在右上角
    22.         4.背景定位可以使用负值
    23.     -->
    24.     <div></div>
    25. </body>
    26. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             width: 700px;
    9.             height: 500px;
    10.             background-image: url("./images/01.jpg");
    11.             background-repeat: no-repeat;
    12.             background-attachment: scroll;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <!--背景固定    background-attachment: 值;
    18.         scroll：默认值，背景图片会随页面的滚动而滚动
    19.         fixed：背景图片不会随页面的滚动而滚动
    20.     -->
    21.     <div></div>
    22. </body>
    23. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             width: 700px;
    9.             height: 500px;
    10.             background-image: url("./images/01.jpg");
    11.             background-repeat: no-repeat;
    12.             background-attachment: scroll;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <!--
    18.         background-image: url("./images/01.jpg");
    19.         background-repeat: no-repeat;
    20.         background-attachment: scroll;
    21.         可以简化为：
    22.             background:颜色值 背景图片 背景重复 背景定位/背景尺寸 背景固定;
    23.     -->
    24.     <div></div>
    25. </body>
    26. </html>