css设置背景图片的大小、填充方式_css设置图像背景色为#77啊,填充为10px-CSDN博客

本文链接：https://blog.csdn.net/Day_and_Night_2017/article/details/122164659

本文介绍了如何使用CSS的`background-size`属性来设定背景图片的大小，分别展示了通过像素值和百分比进行设置的效果。通过像素值可以精确设定图片大小，而百分比则能实现图片自适应填充。示例中包括了全尺寸填充、半尺寸重复铺垫等应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们可以指定像素值或百分比确定背景图片的大小

示例

<p>
Lorem ipsum，中文又称“乱数假文”，是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>

设置像素值大小样式 background-size:80px 60px;

body
{
	background:url(/try/demo_source/img_flwr.gif);
	background-size:80px 60px;
	background-repeat:no-repeat;
	padding-top:40px;
}

设置像素值大小效果

设置百分比示例

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

设置百分比样式 background-size:100% 100%;

{
	background:url(img_flwr.gif);
	background-size:100% 100%;
	background-repeat:no-repeat;
}

设置百分比效果

这里采用拉伸的方式100%填充了大小，这个100%仅仅是背景图片的大小。

设置50%样式 background-size: 50% 50%; background-repeat: repeat;

div
{
	background:url(img_flwr.gif);
	background-size: 50% 50%;
	background-repeat: repeat;
}

设置50%效果

这里通过设置背景图片为50%大小，repeat渲染背景，实现了横向两个铺满，竖向两个铺满的填充方式。

左右配合样式 background-size: 50% 100%; background-repeat: repeat;

div
{
	background:url(img_flwr.gif);
	background-size: 50% 100%;
	background-repeat: repeat;
}

左右配合效果