css中背景位置position怎么用

發(fā)布時間：2022-02-22 14:02:10 來源：億速云閱讀：94 作者：小新欄目：開發(fā)技術(shù)

這篇文章將為大家詳細講解有關(guān)css中背景位置position怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　語法：

　　background-position : length || length
　　background-postiton: position || position
　　length:百分?jǐn)?shù)|由浮點數(shù)字和單位標(biāo)識符組成的長度值
　　positon :top | center| bottom | left | center |right 方位名詞

　　注意：

　　必須指定backgroud-image屬性

　　postion后面是X坐標(biāo)和y坐標(biāo)，可以使用方位名詞或者精確單位

　　如果只指定了一個方位名詞，另一個值默認居中對齊，為50%

　　如果只指定了一個數(shù)值，那該數(shù)值用于X坐標(biāo)，另一個默認是y坐標(biāo)，默認居中

　　如果是精確坐標(biāo)，第一個是x坐標(biāo)第二個是y坐標(biāo)。

　　如果指定了兩個值，兩個值都是方位名詞，則兩個詞順序無關(guān)，比如left top 和top left效果一樣。

　　如果指定了兩個值，精確單位和方位名字混合使用，則第一個值是x坐標(biāo)，第二個值是y坐標(biāo)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 600px;
				height: 300px;
				background-color: pink;
				background-image: url(images/ldh.jpg);
				background-repeat: no-repeat;
				/*左上角*/
				background-position: left top;
				/*水平垂直居中*/
				background-position: center center;
				/*距離左10px 距離上50px*/
				background-position: 10px 50px;
				/*x坐標(biāo)10px 垂直居中*/
				background-position: 10px;

			}
		</style>
	</head>
	<body>
	</body>
	<div>
	</div>
</html>

關(guān)于“css中背景位置position怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

css中背景位置position怎么用

語法：

注意：

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

　　語法：

　　注意：