怎么修改背景图片大小的HTML代码,css如何改变背景图片大小?

我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题。那么css如何改变背景图片大小?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

7fec93ac93e4f39808ed60a16446b6b6.png

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

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

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

属性值:值描述

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

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

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

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

示例

body

{

background:url(/i/bg_flower.gif);

background-size:63px 100px;

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-repeat:no-repeat;

padding-top:80px;

}

上面是缩小的背景图片。

原始图片:Flowers

效果图:

ba15c610ebe4077e357919a4370861be.png

更多CSS相关知识,可访问 CSS教程 !!

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值