css如何设置背景图大小

小编给大家分享一下css如何设置背景图大小,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

css中可使用background-size属性来设置背景图大小,语法”background-size:数值|百分比| |包含封面;”;其中盖代表等比扩展图片来填满元素,包含代表等比缩小图片来适应元素的尺寸。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

<强> css3设置背景图片的大小

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞, 　　& lt; style>, 　　身体 　　{ 　　背景:url (img_flwr.gif); 　　background-size: 80 px  60 px; 　　平铺方式:不再重演; 　　padding-top: 40像素; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; p> 　　Lorem  ipsum中文又称“乱数假文”,,是指一篇常用于排版设计领域的拉丁文文章,,主要的目的为测试文章或文字在不同字型,版型下看起来的效果。 　　& lt;/p> 　　 　　& lt; p>原始图片:https://www.yisu.com/zixun/, & lt; img  src="//demo_source/img_flwr.gif“alt="花"宽度=" 224 "高度=" 162 ">

　　 　　 　　

<强> css3 background-size属性

background-size属性指定背景图片大小;在firefox、chrome,以及ie9上都可以使用。

具体使用方法如下:

<李>

背景图尺寸(数值表示方式):

# background-size {, 　　background-size: 200 px  100 px, 　　} <李>

背景图尺寸(百分比表示方式):

# background-size2 {, 　　background-size: 30%, 60%,, 　　} <李>

背景图尺寸(等比扩展图片来填满元素,即覆盖值):

# background-size3 {, 　　background-size:封面, 　　} <李>

背景图尺寸(等比缩小图片来适应元素的尺寸,即包含值):

# background-size4 {, 　　background-size:包含, 　　} <李>

背景图尺寸(以图片自身大小来填充元素,即汽车值):

# background-size5 {, 　　background-size:汽车,, 　　}

以上是“css如何设置背景图大小”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

css如何设置背景图大小