站长资讯网
最全最丰富的资讯网站

css如何设置背景图片的大小

在css中,可以利用background-size属性设置背景图片的大小,该属性可以指定背景图像的尺寸,语法格式“background-size: 带长度单位的数值|百分比值|cover|contain;”。

css如何设置背景图片的大小

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中,可以利用background-size属性设置背景图片的大小;可以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。

background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */ background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */ background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */ background-size:cover;/* 将背景图片等比缩放填满整个容器 */ background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

属性值:

描述
length

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

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

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

percentage

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

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

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

cover

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

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

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

代码示例:

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

效果图:

css如何设置背景图片的大小

(学习视频分享:css视频教程)

赞(0)
分享到: 更多 (0)

网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号