背景 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景</title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                padding: 10px;
                /*
                    background-clip设置显示区域
                        可选值
                            border-box背景延伸到边框的下边
                            padding-box背景会设置到内边距
                            centent-box背景只会设置到内容区
                 */
                /* background-clip: content-box; */
                
                /* 背景颜色 */
                background-color: #bfa;
                /* 
                    background-image设置背景图片
                        背景颜色和背景图片可以同时设置，这样颜色将会作为图片的底色显示
                        背景图片默认会在网页中水平垂直双方向重复
                        
                        设置背景图片时，如果图片小于元素，则图片默认会从元素的左上角开始平铺
                            如果图片大于元素，则多余部分不会显示
                 */
                background-image: url(img/1.png);
        
                /* 
                    background-repeat设置背景图片的重复方式
                        可选值
                            repeat默认值，双方向重复
                            repeat-x水平方向平铺
                            repeat-y垂直方向平铺
                            no-repeat不重复
                 */
                background-repeat: no-repeat;
                
                /* 
                    background-size可以用来设置图片的尺寸
                        需要两个值作为参数：宽度 高度
                        可选值
                            contain完整显示背景图片，可能会有位置没有图片
                            cover使图片将元素填满，可能有部分图片从元素中溢出
                 */
                /* background-size: 200px 200px; */
                /* background-size: 100% auto; */
                /* background-size: auto 100%; */
                /* background-size: contain; */
                /* background-size: contain; */
                
                /* 
                    background-position用来设置背景图片的位置
                        设置方式
                            1.可以通过位置关键字来设置位置
                                top left right bottom center
                            2.可以通过指定偏移量来设置背景图片的位置
                                第一个值，水平反向偏移量，正值，背景向右移动，负值向左移动
                                第二个值，垂直方向偏移量，正值向下走，负值向上走
                 */
                /* background-position: top left; */
                /* background-position: top right; */
                /* background-position: top center; */
                /* background-position: center; */
                /* background-position: top; */
                background-position: 200px 0;
                
                /*            
                            background是背景的简写属性，所有的背景相关的样式都可以在background中设置，并且没有
                                顺序要求
                */
                /* background: url(img/1.png) #bfa no-repeat 100px 100px/200px 200px content-box border-box fixed; */
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

 

posted @ 2022-05-16 22:17  氯丙嗪  阅读(28)  评论(0)  编辑  收藏  举报