【CSS】关于CSS的背景样式

一、关于背景

div.test1 {
    width: 300px;
    height: 300px;
    background-color: darkcyan;

    /* 背景图片地址 */
    background-image: url(./logo.png);

    /* 背景平铺,repeat,no-repeat,repeat-x,repeat-y */
    background-repeat: no-repeat;

    /* 背景图片位置 */
    /* 第一个是X坐标，第二个是Y坐标 */
   
    /* 1.方位名词 */
    /* background-position: left center; */
    
    /* 2.具体数值 */
    /* background-position: 50px 100px; */
    
    /* 3.混合数值 */
    background-position: left 30px;

    /* 背景图像固定,可用于视差效果 */
    /* background-attachment有两个值，默认scroll,随对象内容滚动  */
    /* background-attachment: fixed; */
}

div.test2 {
    width: 300px;
    height: 300px;
    /* 背景复合写法 */
    /* background: 颜色 图片 平铺 滚动 位置; */
    background: aquamarine url(./logo.png) no-repeat fixed center;
}

---

二、主要应用——精灵图

• 精灵图

  • 减少服务器接收和发送请求的次数，提高页面的加载速度

  • 将所有小图片放在一张大图片上

  • 主要针对小背景图片

• 使用方法

  • 通过background-image:url();设置背景图片

  • 然后使用 background-position：X Y调整图片位置 ；

  • 移动背景图片的位置即可在相应的盒子中，显示精灵图中的对应图片

  • 一般情况下是往左、上移动精灵图，为负值

  • 添加精灵图，默认在每个盒子的左上角对齐

三、页面中的图片

• 如果没有设置图片尺寸，那么图片尺寸即为原图大小，如果超出了父元素盒子，也会显示完全

• 如果设置了图片尺寸

  • 设置的是具体的值，则图片缩放为具体的值的大小

    只设置了一边（宽或高），则另一边等比缩放

    设置了两个值（宽和高），则两边对应缩放设置的值

  • 设置的是百分比，则图片缩放为父级元素对应边的大小

    如设置：width:50%;,则图片大小为父元素盒子宽度的50%；

    如果父元素没有设置宽、高，则依次向上一级寻找设置了宽高的祖先元素，直到根标签，即浏览器窗口的宽高

• 页面中插入图片用width和height控制其宽高

• CSS中插入背景图片用background-size:width height控制宽高

  • 只设置了一个值，即为width值，另一个是等比例缩放

  • 设置了两个值，宽高都分别缩放

  • 建议在一个值的情况下，另一个值用auto代替；

    ​ background-size: 100px auto;

  • 如果插入背景图片的盒子设置了宽高，则可以设置background-size:100% 100%;可以让图片宽高等于父元素盒子宽高