css 图片填充-css如何让背景图片拉伸填充防止重复显示

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

如何拉伸和填充背景图像听起来是一个简单的问题。 我很遗憾地告诉你。 事情并不像我们想象的那么简单。

例如，在容器（body、div、span）中设置背景。 这个背景的长和宽值在css2.1之前是不能改变的。

所以实际的结果是只能重复显示css 图片填充，所以出现了repeat、repeat-x、repeat-y、no-repeat的属性。 它用于控制背景图像的显示。 所以背景图片通常有2种类型：

1、是一张整体大图css 图片填充，规格和面积大小正好相符

2. 非常小的棕褐色图像在重复后会产生大图像的非常规则的背景。

不过CSS3出现之后，这种情况得到了改善。 background-size这个属性可以让我们之前的愿望实现。

但该属性在firefox、chrome、ie9上可用。

具体用法如下：

背景图片规格（数值表示方法）：

复制代码

代码如下所示：

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

背景图片规格（比例表示法）：

复制代码

代码如下所示：

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

背景图片规格（等微分膨胀填充元素的图片，即覆盖值）：

复制代码

代码如下所示：

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

背景图像的规格（图像被缩小以适应元素的规格，即包含值）：

复制代码

代码如下所示：

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

背景图片规范（元素填充图片本身的大小，即auto值）：

复制代码

代码如下所示：

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