首頁 >web前端 >css教學 >css如何設定背景圖片的大小

css如何設定背景圖片的大小

青灯夜游原創: 2021-04-21 15:29:4422678瀏覽

在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影片教學）

以上是css如何設定背景圖片的大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：input如何移除邊框下一篇：input如何移除邊框

看更多