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

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

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

在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