CSS 背景及铺满当前div的小技巧

绝地灬酷狼 2023-02-08 12:55 3阅读 0赞

## CSS 背景属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a title="CSS background 属性" href="http://www.w3school.com.cn/cssref/pr_background.asp" rel="nofollow">background</a></td> 
   <td>简写属性，作用是将背景属性设置在一个声明中。</td> 
  </tr> 
  <tr> 
   <td><a title="CSS background-attachment 属性" href="http://www.w3school.com.cn/cssref/pr_background-attachment.asp" rel="nofollow">background-attachment</a></td> 
   <td>背景图像是否固定或者随着页面的其余部分滚动。</td> 
  </tr> 
  <tr> 
   <td><a title="CSS background-color 属性" href="http://www.w3school.com.cn/cssref/pr_background-color.asp" rel="nofollow">background-color</a></td> 
   <td>设置元素的背景颜色。</td> 
  </tr> 
  <tr> 
   <td><a title="CSS background-image 属性" href="http://www.w3school.com.cn/cssref/pr_background-image.asp" rel="nofollow">background-image</a></td> 
   <td>把图像设置为背景。</td> 
  </tr> 
  <tr> 
   <td><a title="CSS background-position 属性" href="http://www.w3school.com.cn/cssref/pr_background-position.asp" rel="nofollow">background-position</a></td> 
   <td>设置背景图像的起始位置。</td> 
  </tr> 
  <tr> 
   <td><a title="CSS background-repeat 属性" href="http://www.w3school.com.cn/cssref/pr_background-repeat.asp" rel="nofollow">background-repeat</a></td> 
   <td> <p>设置背景图像是否及如何重复。</p> </td> 
  </tr> 
 </tbody> 
</table>

今天碰到一个问题是当前背景图片比较小的时候，不想让其重复铺满当前容器的背景：

运用img为一个单独图片容器的宽高等于父节点的宽高，并位于其下面，间接实现图片铺满当前容器

具体代码如下

</div>