背景 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div
        {
            width: 1000px;
            height: 1000px;
            background-color: teal;
            background-image: url("./1.jpg");
            /*
            同时设置背景图片和背景颜色，背景颜色会变成图片的背景色

            如果背景图片小于元素，则背景图片会自动在元素中平铺将元素铺满
            如果比元素大，将会有一部分背景无法显示
            如果一样的，则正常显示

            小于但是只想要有一只


            */
            background-repeat:no-repeat ;
            /* 
            background-repeat
            repeat（默认值）背景图片会沿着x,y双方向重复
            -x
            -y
            no-repeat：不重复
            */

            background-position:right top ;
            /*
            background-position用来设置背景图片的位置
            通过top,right,left,bottom center几个值设置
            必须写两个，如果只写一个，第二个默认center
            
            通过偏移量来指定背景图片的位置的位置
                水平方向的偏移量    垂直方向变量
            */

        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
</body>
</html>

 

posted @ 2021-02-20 18:19  俗气小博  阅读(80)  评论(0)    收藏  举报