CSS样式表之background背景

【CSS常用背景属性】：background （缩写形式）
　　background-color：背景色
　　background-image：背景图 url中放图片地址，背景图和背景色同时存在时，背景图覆盖背景色
　　background-repeat：背景图的重复方式

　　　　属性： no-repeat不平铺，一般要选择不平铺；repeat-x水平平铺；repeat-y垂直平铺；repeat平铺（默认）
　　background-position：位置坐标、偏移量
　　　　》》指定位置：left、center、reight top、center、bottom;
　　　　　　当只写一个属性时，另一个默认居中
　　　　》》填写坐标：水平位置垂直位置（像素/百分比）
　　　　　　当只写一个属性值时，默认写的是水平方向，另一个垂直居中
　　　　水平方向：正数右移负数左移

　　　　垂直方向：正数下移负数上移

　　　　使用百分比时，代表去掉图片后，剩余空白区域距离比例
　　background-clip：裁切背景图和背景色显示区域。

　　　　　　border-box从边框外边缘开始显示；

　　　　　　padding-box从边框内边缘开始显示；

　　　　　　content-box从文字内容区开始显示；不在显示区域的背景图或背景色，会被裁切不显示

　　　　　　不改变定位位置，只是通过裁切显示部分区域

　　background-origin：设置背景图的定位方式。

　　　　　　border-box从边框外边缘开始；

　　　　　　padding-box从边框内边缘开始；

　　　　　　content-box从文字内容区开始

　　　　　　不改变背景图显示区域大小，只决定左上角定位位置

　　background-size:宽高
　　　　【指定宽高】①直接写像素 ②百分比

　　　　》》当只有一个属性值时，默认为宽度、高度等比缩放
　　　　　　当有两个属性时，会按照指定的高度宽度进行压缩/拉伸处理

　　【其他属性值】

　　　　》》contain:图片等比缩放，缩放到宽或高的某一边等于父容器为止，另一边按比例缩放（可能导致部分空余区域无法覆盖）
　　　　》》cover:图片等比缩放，使背景图完全覆盖背景区域（可能导致背景图部分区域无法显示）

<head>
<style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                border: 20px solid greenyellow;
                background-color: red;
                background-image: url(练习用图/rBACFFIdyU2hFpbmAAAe2AYDs5o148_200x200_3.jpg);
                /*背景图覆盖背景色*/
                background-repeat: no-repeat;
                /*background-size: cover;*/
                /*background-position: center;*/
                background-position: 60px 10px;
            }
            .div2{
                width: 300px;
                height: 300px;
                background-color: red;
                padding: 30px;
                border: 20px blue dotted;
                background-image: url(练习用图/caccdb85f2881a0b!200x200.jpg);
                background-repeat: no-repeat;
                background-origin: content-box;
                background-clip: padding-box;
            }
            #ul{
                width: 1000px;
            }
            
        </style>
    </head>
    <body>
        <div class="div1">
            
        </div>
        <div class="div2">
            
            什么能坚持坚持坚持坚持坚持坚持坚持几年男方女方你快点快点康复费能否
        </div>
        
    </body>