網(wǎng)頁(yè)設計中的背景定位

  • 2019-01-22 17:54:11
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

網(wǎng)站建設中利用background-repeat,可以把一個(gè)大圖像放在文檔的背景中,然后使之一直重復。在此基礎上,下面來(lái)看如何改變圖像在背景中的位置。

例如,可以在body元素中將一個(gè)背景圖像居中放置,其結果如圖9-21所示:

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

background-repeat:no-repeat;

background-position:center;}

這里在背景上放了一個(gè)圖像,然后使用值no-repeat使之不能重復。每個(gè)包含圖像的背景都從一個(gè)圖像開(kāi)始,再根據background-repeat的值重復(或不重復)。這個(gè)起點(diǎn)稱(chēng)為原圖像(origin image)。

background-position值:[[<percentage>|<length>|left | center | right][<percentage>]|<length>I top | center | bottom]?]||[[left|center | right]||[top | center | bottom]]I inherit

初始值:0%0%

應用于:塊級元素和替換元素

繼承性:無(wú)

百分數:相對于元素和原圖像上的相應點(diǎn)(見(jiàn)本章后面“百分數值”一節的解釋?zhuān)?/p>

計算值:如果指定了<length>,則為絕對長(cháng)度偏移,否則,是百分數值

網(wǎng)站建設原圖像的放置由backgroimd-position屬性決定,為這個(gè)屬性提供值有很多方法。首先,網(wǎng)頁(yè)設計人員可以使用一些關(guān)鍵字:top、bottom,left,right和center。通常,這些關(guān)鍵字會(huì )成對出現,不過(guò)(如前面的例子所示)也并不總是這樣。還可以使用長(cháng)度值,如50px或2cm,最后也可以使用百分數值。不同類(lèi)型的值對于背景圖像的放置稍有差別。

還要提到一點(diǎn):這就是放置背景圖像的上下文。網(wǎng)站建設CSS2和CSS2.1指出,網(wǎng)頁(yè)設計人員根據background-position,將相對于元素的內邊距邊界放置原圖像。換句話(huà)說(shuō),放置圖像的上下文是內邊框邊界,盡管背景區會(huì )延伸到外邊框邊界。并非所有瀏覽器都能正確地放置圖像,有些瀏覽器就會(huì )相對于外邊框邊界而不是內邊框邊界來(lái)放置原圖像。不過(guò)如果沒(méi)有邊框,無(wú)論是哪一種瀏覽器,效果都是一樣的。

注意:如果有人想了解多年來(lái)CSS有什么改變,可以告訴你,CSS1相對于內容區定義圖像的放置。

盡管有圖像放置的上下文,不過(guò)完全平鋪的背景圖像確實(shí)會(huì )填充邊框區的背景,因為平鋪圖像會(huì )在4個(gè)方向上延伸。稍后會(huì )更詳細地討論這一點(diǎn)。首先,需要了解原圖像在元素中如何定位。

當前文章標題:網(wǎng)頁(yè)設計中的背景定位

當前URL:http://amzcoolest.com/news/wzzz/Background-positioning.html

上一篇:網(wǎng)頁(yè)設計中的方向重復

下一篇:網(wǎng)頁(yè)設計中的關(guān)鍵字

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看