CSS总结-----常用背景相关

逃离我推掉我的手 2022-06-08 08:58 196阅读 0赞

# 1.背景颜色：background-color #

取值:

*  1.具体单词
 *  2.rgb:三原色
 *  3.rgba:三原色+透明度
 *  4.十六进制

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th align="center">格式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>具体单词</td> 
   <td align="center">red….</td> 
  </tr> 
  <tr> 
   <td>三原色</td> 
   <td align="center">（0,0,0）</td> 
  </tr> 
  <tr> 
   <td>rgba</td> 
   <td align="center">（0,0,0,0）</td> 
  </tr> 
  <tr> 
   <td>十六进制</td> 
   <td align="center">ffffff</td> 
  </tr> 
 </tbody> 
</table>

# 2.背景图片：background-image #

格式：

background-image:url(images/aa.jpg);

注意：

*  1.背景图片的地址必须放在URL中，可以是本机，也可以是外面的
 *  2.图片没有标签大时会自动平铺。
 *  3.背景图片不会占位置，插入图片会
 *  4.背景图片可以定位，插入图片不行

# 3.背景平铺：background-repeat #

取值：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th align="center">格式</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>默认</td> 
   <td align="center">repeat</td> 
   <td>水平垂直都有</td> 
  </tr> 
  <tr> 
   <td>默认不需要</td> 
   <td align="center">no-repeat</td> 
   <td>水平垂直都不需要平铺</td> 
  </tr> 
  <tr> 
   <td>水平平铺</td> 
   <td align="center">repeat-x</td> 
   <td>水平方向</td> 
  </tr> 
  <tr> 
   <td>垂直平铺</td> 
   <td align="center">repeat-y</td> 
   <td>垂直方向</td> 
  </tr> 
 </tbody> 
</table>

# 4.背景定位background-position #

格式：

background-position：水平方向 垂直方向；
    //1.注意，这里有两个值，水平和垂直

取值：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th align="center">格式</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>具体单位</td> 
   <td align="center">xpos ypos</td> 
   <td>任何CSS单位都可</td> 
  </tr> 
  <tr> 
   <td>方位词</td> 
   <td align="center">用具体的方位词</td> 
   <td>用具体的方位词</td> 
  </tr> 
  <tr> 
   <td>百分比</td> 
   <td align="center">x% y%</td> 
   <td>相对百分比</td> 
  </tr> 
 </tbody> 
</table>

方位词：  
水平：left center right  
垂直：top center bottom  
//只写一个另外一个默认center  
//同时存在颜色和图片时，图片覆盖颜色

# 5.背景属性连写 #

background:背景颜色 背景图片 平铺方式 关联方式 定位方式

//任何属性都可以省略

# 6.背景关联：background-attachment #

取值：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th align="center">格式</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>默认</td> 
   <td align="center">scroll</td> 
   <td>随滚动条</td> 
  </tr> 
  <tr> 
   <td>滚动</td> 
   <td align="center">fixed</td> 
   <td>不随滚动条</td> 
  </tr> 
 </tbody> 
</table>

# 7.总结 #

回家写完博客就快九点了~~  
每天还得赶早上班~~