css怎么改变背景图片大小

这篇文章主要介绍css怎么改变背景图片大小,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联建站专业成都网站建设、成都网站设计,集网站策划、网站设计、网站制作于一体,网站seo、网站优化、网站营销、软文推广等专业人才根据搜索规律编程设计,让网站在运行后,在搜索中有好的表现,专业设计制作为您带来效益的网站!让网站建设为您创造效益。

在css中,可以使用background-size属性来改变背景图片大小,该属性的作用就是指定背景图片大小,可通过将属性值设置为长度值或百分比来改变图片大小,或者通过将属性值设置为cover和contain关键字来对图片进行伸缩处理。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现。

background-size属性可以指定背景图片大小。语法格式:

background-size: length|percentage|cover|contain;
  • length    设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)

  • percentage    将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"

  • cover    此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

  • contain    此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-size属性可通过长度值或百分比来设置图片大小,或者通过cover和contain来对图片进行伸缩设置。

示例:



	
		
		
	

	
		

原始背景图片大小

 
 

本身这个图片宽度为400px,高度225px

通过CSS修改背景图片大小,图片宽度为200px,高度112px

 

效果图:

css怎么改变背景图片大小

以上是“css怎么改变背景图片大小”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站标题:css怎么改变背景图片大小
新闻来源:http://scyanting.com/article/gcocji.html

其他资讯