網(wǎng)頁設(shè)計(jì)中的長度值

  • 2019-01-25 17:07:27
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://supportcoffeeroasters.com

長度值

最后,我們來看定位的長度值。在為原圖像的位置提供長度值時(shí),這些長度值將解釋為從元素內(nèi)邊距區(qū)左上角的偏移。偏移點(diǎn)是原圖像的左上角。因此,如果網(wǎng)站建設(shè)人員設(shè)置值為20px 30px,原圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右20像素,向下30像素的位置上,如圖9-25所示:

p{background-image:url(yinyang.gif);

background-repeat:no-repeat;

background-position:20px 30px;

border:1px dotted gray;}

圖9-25:使用長度度設(shè)置背景圖像的偏移

這與網(wǎng)頁設(shè)計(jì)中百分?jǐn)?shù)值大不相同,因?yàn)槠浦皇菑囊粋€(gè)左上角到另一個(gè)左上量角的偏移。換句話說,原圖像的左上角與background-position聲明中指定的點(diǎn)對齊。不過,網(wǎng)頁設(shè)計(jì)師可以結(jié)合使用長度和百分?jǐn)?shù)值,得到“二者兼俱”的效果。假設(shè)設(shè)計(jì)師需要一個(gè)背景圖像,它要一直延伸到元素的右邊,并且要從頂部向下延伸10像素,如圖9-26所示。像以往一樣,先指定水平值:

p {background-image:url(bg23.gif);

background-repeat:no-repeat;

background-position:100% l0px;

border:1px dotted gray;}

圖9-26:結(jié)合使用百分?jǐn)?shù)值和長度值

警告:在網(wǎng)站建設(shè)CSS2.1之前的版本中,不能將關(guān)鍵字與其他值混合使用。因此,top 75%是非法的,如果使用了一個(gè)關(guān)鍵字,就只能一直使用關(guān)鍵字,CSS2.1為了讓創(chuàng)作人員更容易地設(shè)計(jì)布局,且考慮很多其他瀏覽器已經(jīng)支持這種功能,所以在這方面有所改變,允許關(guān)鍵字與其他值混用。

如果使用長度值或百分?jǐn)?shù)值,可以使用負(fù)值將原圖像拉出元素的背景區(qū)??紤]一個(gè)例子,使用一個(gè)很大的“陰陽”符號(hào)作為背景。有時(shí)可能要將其居中,不過如果你只希望其中一部分在元素內(nèi)邊距區(qū)的左上角可見,該怎么做呢?沒問題,至少從理論上講是可以做到的。

首先,假設(shè)原圖像為300像素高300像素寬。再假設(shè)只有其右下方1/3的部分可見??梢匀缦碌玫剿璧男Чㄈ鐖D9-27所示):

p{background-image:url(bigyinyang.gif);

background-repeat:no-repeat;

background-position:-200px-200px;

border:1px dotted gray;}

或者,假設(shè)網(wǎng)站建設(shè)人員只希望原圖像的右半部分可見,并在元素中居中,可以如下設(shè)置規(guī)則:

p{background-image:url(bigyinyang.gif);

background-repeat=no-repeat;

background-position:-150px 50%;

border:1px dotted gray;}

理論上負(fù)百分?jǐn)?shù)值也是允許的,不過對此存在兩個(gè)問題。第一個(gè)問題是用戶代理可能有限制,無法識(shí)別負(fù)的background-position值。另一個(gè)問題是,負(fù)百分?jǐn)?shù)值計(jì)算起來很有意思。比方說,原圖像和元素很可能大小不同而這會(huì)導(dǎo)致意想不到的后果。例如,考慮以下規(guī)則:

p{background-image:url(pix/bxgyinyang.gif);

background-repeat:no-repeat;

background-position:-10%-10%;

border:1px dotted gray;width:500px;}

這個(gè)規(guī)則要求原圖像外由-10%-10%定義的點(diǎn)與各段落中同樣定義為-10%-10%的一個(gè)點(diǎn)對齊。圖像的寬度和高度都是300像素,所以我們知道,其對齊點(diǎn)可以描述位于圖像頂部之上30像素。左邊界再向左30像素的位置(也就是-30px X-30px)。段落元素的寬度都相等(500px),所以水平對齊點(diǎn)是其內(nèi)邊距區(qū)左邊界再向左50像素處。這說明,每個(gè)原圖像的左邊界將在段落左內(nèi)邊距邊界向左20像素的位置。這是因?yàn)?,圖像的-30px對齊點(diǎn)與段落的-50px點(diǎn)對齊。二者之間相差20像素。

不過,各段落的高度不同,所以每個(gè)段落的垂直對齊點(diǎn)都不同。半隨機(jī)地選擇一個(gè)例子,如果一個(gè)段落為300像素高,原圖像的頂端將與元素內(nèi)邊距區(qū)的頂端對齊,因?yàn)槎叩拇怪睂R點(diǎn)都是-30px。如果一個(gè)段落高度為50像素,其對齊點(diǎn)將是-5px,相應(yīng)地,原圖像的頂端實(shí)際上將在內(nèi)邊距區(qū)頂端向下25像素處。

正百分?jǐn)?shù)值也可能出現(xiàn)同樣的問題(可以想象一下,如果將原圖像與比該圖像矮的一個(gè)元素的底端對齊,會(huì)發(fā)生什么情況),所以,以上介紹并不是說不應(yīng)該使用負(fù)值,而只是提醒網(wǎng)站建設(shè)人員往往存在一些要考慮的問題。

在這一節(jié)中,每個(gè)例子使用的重復(fù)值都是no-repeat。原因很簡單:如果只有一個(gè)背景圖像,可以更容易地査看定位對第一個(gè)背景圖像的放置有何影響。不過,完全沒必要阻止背景圖像重復(fù):

p{background-image:url(bigyinyang.gif);

background-position:-150px 50%;

border:1px dotted gray;}

所以,允許背景圖像重復(fù)時(shí),從圖9-29可以看到,平鋪模式將從background-position指定的位置開始。

圖9-29 :使用background-position屬性設(shè)置平鋪模式的起點(diǎn)

這再一次說明了原圖像的概念,對于理解下一節(jié)非常重要。

當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計(jì)中的長度值

當(dāng)前URL:http://supportcoffeeroasters.com/news/wzzz/length-value.html

上一篇:網(wǎng)頁設(shè)計(jì)中的百分?jǐn)?shù)值

下一篇:網(wǎng)頁設(shè)計(jì)中的深入方向重復(fù)

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))