css如何改变背景图片大小?

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

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

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

语法:

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

属性值:

auto(自动)
percentage将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

示例

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(/i/bg_flower.webp);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片:<img src="/i/bg_flower.webp" alt="Flowers"></p>
</body>
</html>

效果图:

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

以上就是css如何改变背景图片大小?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读