背景 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                width: 500px;
                height: 500px;
                background-color: #BBFFAA;
                margin: 0 auto;
                /*
                    使用background-image设置背景图片
                        语法：background-image: url(相对路径);
                        
                        如果背景图片大于元素，默认会显示图片左上角
                        背景图片和元素一样大，则会全部显示
                        背景图片小于元素大小，则会平铺以充满背景
                    
                    可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将
                    作为背景图片的底色
                    一般设置背景图片时都会同时指定一个背景颜色
                    （与背景相关样式不会被继承）
                */
               background-image: url(img/1%20.jpg);
               
               /*
                     background-repeat: ;用于设置背景图片的重复方式
                        可选值：repeat 默认值 背景图片双向重复（平铺）
                                no-repeat 背景图片不会重复，有多大显示多大
                                repeat-x，背景图片沿水平方向重复
                                repeat-y，背景图片沿垂直方向重复
               */
               background-repeat: repeat-x;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
    </body>
</html>

语法：background-image：url（相对路径）

　　    background-repeat 用于设定背景图片的重复方式

　　　　　　可选值：

　　　　　　　　　repeat 默认值 背景图片双向重复（平铺）

　　　　　　　　　no-repeat 背景图片不会重复，有多大显示多大

　　　　　　　　　repeat-x 背景图片沿水平方向重复

　　　　　　　　　repeat-y 背景图片沿垂直方向重复

 

posted @ 2021-07-06 14:49  2237774566  阅读(136)  评论(0)    收藏  举报