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

示例

<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;
}

 左右配合效果

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐