CSS background-position

admin發表於2019-11-22
CSS

設定元素背景圖片是頁面佈局中常見操作，通過background屬性即可實現。

background是一個複合屬性，也它可以一次性設定多個特性。

程式碼如下：

[CSS] 純文字檢視 複製程式碼
div{background:#F60 url(logo.gif) top right no-repeat}

本文單獨介紹一下背景定位屬性background-position，因為它相對有點難度。

一.基本概念:

background-position屬性可以設定背景圖片的位置。

設定背景圖片位置是剛需，因為並不是所有的背景圖片放在元素中都是恰到好處的，甚至還需要動態效果。

語法結構:

[CSS] 純文字檢視 複製程式碼
background-position : length || position

引數解析:

（1）.length :<percentage> | <length>。

（2）.position:top | center | bottom | left | center | right。

          top：背景影像在垂直方向，從頂部開始繪製。 

          bottom：背景影像在垂直方向，從底部開始繪製。

          left：背景影像在水平方向，從左邊開始繪製。 

          center：背景影像水平和垂直方向上居中。 

          right：背景影像在水平方向上，從右邊開始繪製。 

如果該屬性提供兩個屬性值，第一個用於橫座標，第二個用於縱座標。

如果只提供一個，該值將用於橫座標；縱座標將預設為50%。

background-position用來控制背景圖片的在所在元素中的位置，當然這個定位需要參照座標系。

數學中，原點是兩個座標軸的交點（0,0），CSS中也大致如此，只不過數學中，y軸向上為正，CSS相反。

預設原點（0px 0px）位置是元素的左上角，預設狀態下背景圖片的左上角位於座標原點位置。

所要定位的背景圖片的座標其實就是背景圖片左上角相對於原點的座標。

座標系圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/21/154451x0o8meaz2n6ycnym.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由於IE6和IE7（當前完全可以不用考慮）與其他瀏覽器渲染效果不同，參考點也有所不同。

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/22/112615l2w5m0vkjtmoknt0.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

CSS3提供了更多操控元素背景圖片的功能，本文不做介紹，具體參閱如下文章：

（1）.CSS3 background-size一章節。

（2）.CSS3 background-origin一章節。 

（3）.CSS3 background-clip一章節。

（4）.CSS3 設定多個背景圖片一章節。

二.例項程式碼演示:

a:3:{s:3:\"pic\";s:43:\"portal/201808/04/093357u4sbmo03ofms7z43.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

309x99的圖片分隔為9份，每一份的長寬分別是103px和33px。

下面的所有例項將使用九宮格圖片作為背景，通過精確的控制，可以很好的演示background-position功能。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.ant{
  background-color:green;
  background-image:url(mytest/demo/mybg.png);
  background-position:0px 0px;
  background-repeat:no-repeat;
  width:400px;
  height:300px;
} 
</style>
</head>
<body>
<div class="ant"></div>
</body>
</html>

預設定位狀態下的背景圖片，背景圖片位於元素的左上角。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.ant{
  background-color:green;
  background-image:url(mytest/demo/mybg.png);
  background-position:0px -33px;
  background-repeat:no-repeat;
  width:400px;
  height:300px;
} 
</style>
</head>
<body>
<div class="ant"></div>
</body>
</html>

座標設定為0px -33px；Y軸座標值設定為負值，將背景圖片在Y軸上從原點向上移動。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant{
  background-color:green;
  background-image:url(mytest/demo/mybg.png);
  background-position:-103px 0px;
  background-repeat:no-repeat;
  width:400px;
  height:300px;
} 
</style>
</head>
<body>
<div class="ant"></div>
</body>
</html>

將背景圖片的座標設定為-103px 0px；X軸座標值設定為負值，是將圖片從原點向左移動。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant{
  background-color:green;
  background-image:url(mytest/demo/mybg.png);
  background-position:-103px -33px;
  background-repeat:no-repeat;
  width:400px;
  height:300px;
} 
</style>
</head>
<body>
<div class="ant"></div>
</body>
</html>

將背景圖片的座標設定為-103px -33px。

相關文章