让我们向您解释css如何设置背景图片的大小。相信朋友们也应该密切关注这个话题。现在我们来和朋友聊聊css是如何设置背景图片大小的。边肖还收集了css如何设置背景图片大小的相关信息。我希望你看到后会喜欢。

在css中，您可以使用背景大小属性来设置背景图像的大小，它可以指定背景图像的大小。语法格式为“background-size:数值，长度单位|百分比值|封面|包含；”。

本教程操作环境：windows7系统，CSS3HTML5第5版，戴尔G3电脑。

在css中，可以使用background-size属性设置背景图片的大小；它可以显示为长度值或百分比，图片可以按封面和内容缩放。

背景尺寸size:auto/*默认值，不改变背景图片的高度和宽度*/

背景尺寸size:100px 50px/*第一个值较宽，第二个值较高。设置值后，将其用作图片宽度，按比例缩放*/

背景尺寸：10%；/* 0%到100%之间的任何值都将以百分比形式显示背景图片的宽度和高度，当设置值时，它将与图片宽度成比例*/

背景尺寸：封面；/*用相同比例的背景图片填满整个容器*/

背景尺寸size:contain/*将背景图片缩放到靠近容器边缘的某个边缘*/属性值：

描述长度设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置了一个值，第二个值将设置为“自动”。

百分比将背景图像的宽度和高度设置为父元素的百分比。

第一个值设置宽度，第二个值设置高度。

如果只设置了一个值，第二个值将设置为“自动”。

Cover将背景图像扩展到足够大，以便背景图像完全覆盖背景区域。

背景的某些部分可能不会显示在背景定位区域。

Contain将图像扩展到最大大小，以便其宽度和高度能够完全适应内容区域。代码示例：

！声明文档类型

超文本标记语言

头

meta charset='utf-8 '

风格

正文{

background : URL(img/5 . jpg)；

背景尺寸size: 100px 100px

-moz-background-size : 100 px 100 px；

/*旧版火狐*/

背景-重复：不重复；

填充-top : 80px；

}

/style

/head

身体

p以上是缩小的背景图。/p

p原图：br/

img src=' img/5 . jpg ' alt=" Flowers "/p

/body

/html渲染：

(学习视频分享：css视频教程)以上是css如何设置背景图片大小的详细内容。请多关注php中文网站的其他相关文章！

来源：php中文网站