css中怎么改变背景图片大小?

在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现。下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法,希望对大家有所帮助。

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

语法:

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

属性值:


描述
length设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div{
				width: 400px;
				height: 320px;
			}
			.box1{
				background:url(../demo/1.jpg) no-repeat;
			}
			.box2{
				background:url(../demo/1.jpg) no-repeat;
				background-size: 200px 160px;
				
			}
		</style>
	</head>

	<body>
		<p><strong>原始图片大小</strong></p> 
		
		<div class="box1"></div> 
		<p>本身这个图片宽度为400px,高度320px</p>
		<br />
		<p><strong>通过CSS修改图片大小</strong></p> 
		<div class="box2"></div>
	</body>

</html>

效果图:

以上就是css中怎么改变背景图片大小?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏