一天搞定CSS：背景background--03

朴灿烈づ我的快乐病毒、 2022-06-16 05:07 174阅读 0赞

**背景分为—背景颜色和背景图片**

# **1.背景属性** #

![这里写图片描述][SouthEast]

# **2.背景颜色** #

代码演示：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 300px;
                    height: 300px;
                    border: 10px solid red;
    
                    /*背景颜色三种表示方法:颜色的单词,rgb,16进制*/
                    background-color:green;
                    background-color: rgb(0,0,0);
                    background-color:#008800;
                }
            </style>
        </head>
        <body>
    
            <div>
    
            </div>
        </body>
    </html>

# **3.背景图片** #

**背景图片有：位置 重复性**

**代码演示：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 300px;
                    height: 300px;
                    border: 10px solid red;
    
                    /*背景图片*/
                    background-image:url(images/img.jpg);
                    /*背景图片是否重复：repeat
                     * repeat-x横向重复
                     * repeat-y纵向重复
                     * no-repeat不重复
                     * */
                    background-repeat: no-repeat;
                    background-repeat: repeat-x;
                    background-repeat: repeat-y;
    
                    /*
                     background-position:x y;   背景图片的位置
                     传数值：（背景图片离左上角的距离）
                                x:
                                    正值      从容器的左边往右边走的距离
                                    负值      从容器的左边往左边走的距离
                                y:
                                    正值      从容器的上边往下边走的距离
                                    负值      从容器的上边往上边走的距离
                        传关键字
                                x:
                                    left        图片在容器的左边
                                    center  图片在容器X轴的中心
                                    right   图片在容器的右边
                                y:
                                    top     图片在容器的上边
                                    center  图片在容器Y轴的中心
                                    bottom  图片在容器的下边
                     * */
                    background-position: 5px 10px;
                }
            </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

[SouthEast]: /images/20220616/ebfbb5e5c49f4491abb3d9ae67fe0a12.png