首页 >web前端 >css教程 >css中如何设置背景图片的大小

css中如何设置背景图片的大小

王林
王林原创
2020-11-24 14:37:3119457浏览

css中设置背景图片的大小的方法:可以利用background-size属性来进行设置,如【background-size:80px 60px;】,【background-size】属性可以指定背景图片的宽度和高度。

css中如何设置背景图片的大小

本教程操作环境:windows10系统、css3版,该方法适用于所有品牌电脑。

(推荐教程:css视频教程

css中设置背景图片的大小的方法:

属性介绍:

background-size属性指定背景图片大小。

语法:

background-size: length|percentage|cover|contain;

属性值:

  • length    设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)    

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

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

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

举例:

控制背景图片的大小

div
{
    background:url(img_flwr.gif);    
    background-size:80px 60px;    
    background-repeat:no-repeat;
}

相关推荐:CSS教程

以上是css中如何设置背景图片的大小的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn