css实现配景图片拉伸添补

css迅速入门：本文为大家介绍了css实现配景图片拉伸添补的多种办法，拥有一定的参照 价值，但愿可以帮忙到大家。概括办法：通过等比缩小图片来顺应元素的尺寸，即contain值。

第一我们晓得用作配景图片的有两类：

（举荐学习：css迅速入门）

1、一整张大图，尺寸和区域大小恰好吻合；

2、一个很小的条状图，通过repeat后，构成一个很法则的大图配景。

那么怎样实现配景图片拉伸添补呢？

办法如下：

配景图尺寸（数值表示方式）：

代码如下:

#background-size{
background-size:200px 100px;
}

配景图尺寸（百分比表示方式）：

代码如下:

#background-size2{
background-size:30% 60%;
}

配景图尺寸（等比扩展图片来填满元素，即cover值）：

代码如下:

#background-size3{
background-size:cover;
}

配景图尺寸（等比缩小图片来顺应元素的尺寸，即contain值）：

代码如下:

#background-size4{
background-size:contain;
}

配景图尺寸（以图片本身大小来添补元素，即auto值）：

代码如下:

#background-size5{
background-size:auto;
}

以上就是css实现配景图片拉伸添补的细致内容，更多请关注 百分百源码网 其它相干文章！