Python HTML和CSS 10：background属性

2019-03-01 本文已影响11人 IIronMan

总体内容
1、background属性的解释
2、具体的举例

一、background属性的解释：background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

1.1、background-color 设置背景颜色

1.2、background-image 设置背景图片地址

设置背景图片地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background属性</title>
    <style type="text/css">
         .box1{
              width: 200px;
              height: 200px;
              border: 1px solid #000;
              margin: 50px auto 0;
              background-color: yellow;
              background-image: url("images/bg.jpg");
          }
     </style>
</head>
<body>
     <div class="box1"></div>
</body>
</html>

默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。

1.3、background-repeat 设置背景图片如何重复平铺,推荐一篇 background-repeat 相关播客
- (1)、no-repeat：背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色
  
  no-repeat：背景不重复，背景和盒子左上角对齐
```
.box1{
     width: 200px;
     height: 200px;
     border: 1px solid #000;
     margin: 50px auto 0;
     background-color: yellow;
     background-image: url("images/bg.jpg");
     background-repeat: no-repeat;
}
```
- (2)、repeat：背景图像将向垂直和水平方向重复。这是默认,也就是上面看到的 1.3 的现象
- (3)、inherit：指定background-repea属性设置应该从父元素继承
- (4)、round：background-repeat取值为round时，会像repeat一样，背景图片会平铺整个容器，但和repeat不一样的是，他会根据容器尺寸和图片尺寸做一个自适应处理，不会像repeat一样，造成图片显示不全。当图片重铺的次数不适合一个整数时，会重新调整，使图片按整数平铺在整个容器中。类似于background-size一样会自动计算背景图片尺寸。
  
  round
- (5)、space：background-repeat取值为space时，和round又会不一样，但也有类似之处。类似之处是，背景图片会平铺整个容器，不会造成背景图片裁剪；但也和round将不一样，使用space时，不够整数背景图片平铺整个容器的时候，会将剩余的空间平均分配给相邻背景之间。假设我们的容器是200 x 200，而背景图片的尺寸是80 x 80。那么水平方向将会平铺2张背景图，而相邻两张背景图之间会有一个40/(2-1) = 40间距。同样道理，在垂直方向会有一个40/(2-1) = 40的间距。
  
  space
- (6)、repeat-x：横向平铺盒子，盒子其他部分显示背景颜色。
  
  横向平铺盒子，盒子其他部分显示背景颜色
```
.box1{![WechatIMG38.jpeg](https://img.haomeiwen.com/i1728484/3bae0cf89f2e8e35.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

     width: 200px;
     height: 200px;
     border: 1px solid #000;
     margin: 50px auto 0;
     background-color: yellow;
     background-image: url("images/bg.jpg");
     background-repeat: repeat-x;
}
```
- (7)、repeat-y：纵向平铺盒子，盒子其他部分显示背景颜色
  
  repeat-y：纵向平铺盒子，盒子其他部分显示背景颜色。
```
.box1{
     width: 200px;
     height: 200px;
     border: 1px solid #000;
     margin: 50px auto 0;
     background-color: yellow;
     background-image: url("images/bg.jpg");
     background-repeat: repeat-x;
}
```
1.4、background-position 设置背景图片的位置，可以在水平方向设置 left、center、right，在垂直方向设置 top、center、bottom，除了设置这些方位词之外，还可以设置具体的数值，可以任意组合，举例如下：
- (1)、举例 1：水平居中，靠近底部
```
.box1{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 50px auto 0;
    background-color: yellow;
    background-image: url("images/bg.jpg");
    background-repeat: no-repeat;
    background-position: center bottom;
}
```
  水平居中，靠近底部
- (2)、举例 2：设置具体的数值
  
  设置具体的数值
提示：background-position 后面跟两个参数是代表水平和垂直方向的设置
1.5、background-attachment 设置背景图片是固定还是随着页面滚动条滚动

提示：实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

二、具体的举例

2.1、通过雪碧图来做如下布局：

通过雪碧图来布局
雪碧图

2.2、代码如下

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>雪碧图的制作</title>
     <style type="text/css">
        .box{
            background-color: yellow;
            width: 300px;
            height: 315px;
            list-style: none;
            margin: 50px auto 0;
            padding: 0px;
         }
        .box li{
            height: 60px;
            border-bottom: 1px dotted #000000;
            line-height: 60px;
            text-indent: 50px;
            background: url(images/bg01.png) 0px 10px no-repeat;
         }
        .box .icon2{
            background-position: 0px -71px;
        }
        .box .icon3{
            background-position: 0px -154px;
        }
        .box .icon4{
            background-position: 0px -235px;
        }
        .box .icon5{
            background-position: 0px -315px;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>飞驰人生</li>
        <li class="icon2">飞驰人生</li>
        <li class="icon3">飞驰人生</li>
        <li class="icon4">飞驰人生</li>
        <li class="icon5">飞驰人生</li>
    </ul>
</body>
</html>

分析：5个 li 本来要加载5张图片，由于我们使用的雪碧图在重复利用，改变的是同一张图片的 background-position,从而减少请求来获取图片的效果

Python HTML和CSS 10：background属性

猜你喜欢

热点阅读