CSS背景

浅浅的花香味﹌ 2022-09-03 12:28 291阅读 0赞

**1.背景颜色：** background-color: \#bfa;

**2.背景图片：**background-image: url("");

如果同时设置背景颜色和背景图片，则背景颜色会成为背景图片的背景颜色

当图片的大小和元素的大小不一样时，

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>图片小于元素</td> 
   <td>图片会多个铺满元素</td> 
  </tr> 
  <tr> 
   <td>图片大于元素</td> 
   <td>一部分无法显示</td> 
  </tr> 
  <tr> 
   <td>图片等于元素</td> 
   <td>正常显示</td> 
  </tr> 
 </tbody> 
</table>

**3.设置图片铺满元素的方式：**

background-repeat: repeat; 默认值，沿x和y方向同时铺满

background-repeat: repeat-x;沿着x方向铺满

background-repeat: repeat-y;沿着y方向铺满

background-repeat: no-repeat;不铺满

**4.设置图片在元素中的位置：**

background-position:center ;

通过方位词：left，right，center，top，bottom，

即在一个九宫格中，一个位置用两个方位词表示，如果只有一个方位词，另一个默认是center

通过偏移量

即图片相对于左上角偏移多少个像素，可正可负。**雪碧图（CSS-sprite）**的应用原理。

雪碧图：把一张包含许多小图片的大图片，通过调整position和元素大小，来设置获得想要的小图片。

**5.背景图片大小**

background-size: 100px 100px; 第一个设置宽度，第二个设置高度

只写一个另一个默认是auto，图片会等比例缩放

特殊值：cover，图片比例不变，将元素铺满，但可能不完整；contain 图片比例不变，图片在元素中完整显示，但不铺满。

**6.背景的范围**

background-clip: content-box;背景只在内容区显示

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>border-box</td> 
   <td>默认值背景会在边框下边显示</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>背景显示到内边距，不会在边框显示</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>背景显示到内容区</td> 
  </tr> 
 </tbody> 
</table>

**7.背景图片的偏移量原点**

background-origin: content-box;内容区左上角为原点

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>border-box</td> 
   <td>背景图片的原点是边框左上角</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>默认值，背景显示的原点是内边距左上角</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>背景的原点是内容区的左上角</td> 
  </tr> 
 </tbody> 
</table>

**8.背景图片是否跟随元素滚动**

background-attachment: scroll;跟随滚动

background-attachment: fixed;固定不滚动