<output id="jbxdv"></output>

      1. 網頁設計中的長度值

        • 2019-01-25 17:07:27
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        長度值

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

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

        background-repeat:no-repeat;

        background-position:20px 30px;

        border:1px dotted gray;}

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

        這與網頁設計中百分數值大不相同,因為偏移只是從一個左上角到另一個左上量角的偏移。換句話說,原圖像的左上角與background-position聲明中指定的點對齊。不過,網頁設計師可以結合使用長度和百分數值,得到“二者兼俱”的效果。假設設計師需要一個背景圖像,它要一直延伸到元素的右邊,并且要從頂部向下延伸10像素,如圖9-26所示。像以往一樣,先指定水平值:

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

        background-repeat:no-repeat;

        background-position:100% l0px;

        border:1px dotted gray;}

        圖9-26:結合使用百分數值和長度值

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

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

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

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

        background-repeat:no-repeat;

        background-position:-200px-200px;

        border:1px dotted gray;}

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

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

        background-repeat=no-repeat;

        background-position:-150px 50%;

        border:1px dotted gray;}

        理論上負百分數值也是允許的,不過對此存在兩個問題。第一個問題是用戶代理可能有限制,無法識別負的background-position值。另一個問題是,負百分數值計算起來很有意思。比方說,原圖像和元素很可能大小不同而這會導致意想不到的后果。例如,考慮以下規則:

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

        background-repeat:no-repeat;

        background-position:-10%-10%;

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

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

        不過,各段落的高度不同,所以每個段落的垂直對齊點都不同。半隨機地選擇一個例子,如果一個段落為300像素高,原圖像的頂端將與元素內邊距區的頂端對齊,因為二者的垂直對齊點都是-30px。如果一個段落高度為50像素,其對齊點將是-5px,相應地,原圖像的頂端實際上將在內邊距區頂端向下25像素處。

        正百分數值也可能出現同樣的問題(可以想象一下,如果將原圖像與比該圖像矮的一個元素的底端對齊,會發生什么情況),所以,以上介紹并不是說不應該使用負值,而只是提醒網站建設人員往往存在一些要考慮的問題。

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

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

        background-position:-150px 50%;

        border:1px dotted gray;}

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

        圖9-29 :使用background-position屬性設置平鋪模式的起點

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

        當前文章標題:網頁設計中的長度值

        當前URL:http://www.freenetsites.com/news/wzzz/length-value.html

        上一篇:網頁設計中的百分數值

        下一篇:網頁設計中的深入方向重復

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>