CSS背景圖片定位

時間 2019-12-09

標籤 css 背景圖片定位欄目 CSS 简体版

原文原文鏈接

在網頁開發中咱們常常須要對圖片進行分割（以下圖）來使用，而不是分別提供單獨的圖片來調用，常見的如頁面背景，按鈕圖標等，這樣作的好處就是減小請求次數，節省時間和帶寬。html

對背景圖片的定位就須要用到CSS中的background樣式，如：ui

div{

background-image: url("1234.png");

background-repeat: no-repeat;

background-position: 0px -100px;

}

屬性解釋：url

background-image : none | url ( url ) spa

none 3d	:code	默認值。無背景圖htm
url ( url ) blog	:圖片	使用絕對或相對 url 地址指定背景圖像ip

background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat	:	默認值。背景圖像在縱向和橫向上平鋪
no-repeat	:	背景圖像不平鋪
repeat-x	:	背景圖像僅在橫向上平鋪
repeat-y	:	背景圖像僅在縱向上平鋪

background-position : length || length
background-position : position || position

length	:	百分數 \| 由浮點數字和單位標識符組成的長度值。
position	:	top \| center \| bottom \| left \| center \| right

background-position屬性說明：

必須先指定 background-image 屬性。

默認值爲： 0% 0% 。此時背景圖片左上角將被定位於容器的左上角。

若是隻指定了一個值，該值將用於橫座標。縱座標將默認爲 50% 。若是指定了兩個值，第二個值將用於縱座標。

定位圖像位置有三種方式：百分比、像素值、對齊方式.

1、對齊方式

對齊方式有5個值top、botton、lef、right、center，分別對應頂部對齊，底部對齊，左對齊，右對齊，居中對齊（對齊就是容器的某一邊跟圖片的對應邊重疊）

上圖中包含了三個不一樣樣式按鈕，咱們能夠在鼠標點擊和雙擊時改變它的樣式，

代碼：

<html>

<head>

<style>

div{

background-image: url("browseBtn.png");

background-repeat: no-repeat;

cursor: hand;

width: 80px;

height: 24px;

}

.button1{

background-position: top;

}

.button2{

background-position: center;

}

.button3{

background-position: bottom;

}

</style>

<script>

function clickButton()

{

document.getElementById('button').className = "button2";

}

function dblclick()

{

document.getElementById('button').className = "button3";

}

</script>

</head>

<body>

<div id="button" class="button1" onclick="clickButton()" ondblclick="dblclick()"></div>

</body>

</html>

展現效果：

默認效果

單擊效果

雙擊效果

相似的咱們還能夠定義左上、左中、左下、中上、居中、中下、右上、右中、右下幾種樣式來定位圖片，如:

在介紹像素值和百分比前咱們要先了解容器的座標軸概念：

容器的左上角爲座標原點，向右爲正向X軸，向左爲反向X軸，向下爲正向Y軸，向上爲反向Y軸，而所謂的像素值就是圖片原點和容器座標原點的座標差，分別對應background-position中的第一個和第二個參數，這個座標差的計算就須要咱們根據圖片和容器的大小來對圖片作相應的移動。

2、像素值

上圖中包含了大量的圖標，如今咱們就是選取其中的幾個圖標來講明如何計算像素值：

<html>

<head>

<style>

.but1, .but2, .but3, .but4{

background-image: url("ui-icons.png");

background-repeat: no-repeat;

float: left;

cursor: hand;

/*border: 1px solid;*/

}

.but1{

width: 14px;

height: 18px;

border-right-width:0px;

background-position: -113px -190px;

}

.but2{

width: 14px;

height: 18px;

border-right-width:0px;

background-position: -113px -126px;

}

.but3{

width: 14px;

height: 18px;

border-right-width:0px;

background-position: 0px -110px;

}

.but4{

width: 14px;

height: 18px;

background-position: -240px -126px;

}

</style>

</head>

<body>

<div class="but1"></div>

<div class="but2"></div>

<div class="but3"></div>

<div class="but4"></div>

</body>

</html>

效果以下：

以DIV1爲例來說解

容器DIV1寬爲14px，高爲18px，咱們要得到向右箭頭就須要將其移動到容器內，因此須要圖片的原點向左平移113px，再向上平移190px，結合上面座標軸的概念水平向左爲負，垂直向上也爲負，因此結果就是-113px -190px；其它三個DIV方法也相似了，歸結起來就是把須要的圖標移動到容器內，而後根據座標軸計算平移量就能夠了，是否是很簡單呀！

三、百分比

百分比的計算方法略顯複雜，圖片長寬乘以百分比對應的位置和容器長寬乘以百分比對應的位置重疊，如圖：

咱們能夠經過公式來根據像素值計算出百分比：（容器的寬/高度-圖片的寬/高度） x 百分比 = 像素值

上圖圖片咱們能夠經過百分比的方式把它水平擺放

<html>

<head>

<style>

.but1, .but2, .but3, .but4{

background-image: url("1234.png");

background-repeat: no-repeat;

width: 100px;

height: 100px;

float: left;

}

.but1{

background-position: 0% 0%;

}

.but2{

background-position: 0px 33.33%;

}

.but3{

background-position: 0px 66.66%;

}

.but4{

background-position: 0px 100%;

}

</style>

</head>

<body>

<div class="but1"></div>

<div class="but2"></div>

<div class="but3"></div>

<div class="but4"></div>

</body>

</html>