網(wǎng)頁設(shè)計(jì)中的方向重復(fù)

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

有方向的重復(fù)

過去,如果網(wǎng)站建設(shè)人員想要某種“邊欄式(sidebar)”背景,必須創(chuàng)建一個(gè)很短但非常寬的圖像放在背景上。有一段時(shí)間,這種圖像的最佳大小是10像素高1,500像素寬。當(dāng)然,圖像的大部分都是空白,只有左邊100像素左右包含“邊欄”圖像。圖像的余下部分基本上都被浪費(fèi)了。

如果能創(chuàng)建一個(gè)只有10像素高100像素寬的邊欄圖像,而沒有浪費(fèi)的空白空間,然后只在垂直方向上重復(fù)這個(gè)圖像,這樣不是更高效嗎?這肯定會(huì)讓網(wǎng)頁設(shè)計(jì)者的設(shè)計(jì)工作容易一些,而且用戶的下載也會(huì)快得多。下面來看background-repeat。

background-repeat值:

repeat | repeat-x | repeat-y | no-repeat | inherit

初始值:repeat

應(yīng)用于:所有元素

繼承性:無

計(jì)算值:根據(jù)指定確定

你可能猜得到,repeat導(dǎo)致圖像在水平垂直方向上都平鋪,就像以往背景圖像的通常做法一樣。repeat-x和repeat-y分別導(dǎo)致圖像只在水平或垂直方向上重復(fù),no-repeat則不允許圖像在任何方向上平鋪。

默認(rèn)地,背景圖像將會(huì)從一個(gè)元素的左上角開始(本章后面將介紹如何改變這種默認(rèn)行為)。因此,以下規(guī)則將得到如圖9-17所示的結(jié)果:

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

background-repeat: repeat-y;}

圖9-17:垂直平鋪背景圖像

(為了讓規(guī)則盡量簡短,這里省略了背景顏色,不過要記住,只要有背景圖像就應(yīng)該同時(shí)包含一個(gè)背景顏色。)

不過,假設(shè)網(wǎng)頁設(shè)計(jì)者希望圖像在文檔的頂端重復(fù)。不必為此創(chuàng)建一個(gè)特殊圖像,使其下面全部都是空白,只需對(duì)規(guī)則做一個(gè)小改動(dòng):

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

background-repeat:repeat-x;}

如圖9-18所示,這個(gè)圖像會(huì)從其起點(diǎn)沿著x軸重復(fù)(也就是水平重復(fù)),在這里就是從瀏覽器窗口的左上角開始水平重復(fù)。

最后,你可能根本不希望重復(fù)背景圖像。在這種情況下,可以使用值no-repeat:

body{background-image:url(yinyang.gif);background-repeat:no-repeat;)

這個(gè)值看上去可能用處不大,因?yàn)檫@個(gè)聲明只會(huì)把一個(gè)小圖像放在文檔的左上角,不過再來看一個(gè)大得多的符號(hào),如圖9-19所示:

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

background-repeat:no-repeat;}

圖9-18:水平平鋪

圖9-19:放一個(gè)大背景圖像

由于能控制重復(fù)方向,這使得可能達(dá)到的效果大大增加。例如,假設(shè)網(wǎng)頁設(shè)計(jì)者希望文檔中每個(gè)h1元素的左邊有一個(gè)三重邊框。可以把這個(gè)概念再進(jìn)一步,在每個(gè)h2元素的頂端設(shè)置一個(gè)波浪線邊框。圖像采用特定方式著色,使之能與背景色混合,得到圖9-20所示的波浪效果:

h1{background-image:url(Criplebor.gif);background-repeat:repeat-y;}

h2{background-image:url(wavybord.gif);background-repeat:repeat-x;background-color:#CCC;}

圖9-20:對(duì)有背景圖像的元素加邊框

僅僅通過選擇適當(dāng)?shù)膱D像,并用某種創(chuàng)造性的方式加以使用,就可以創(chuàng)建一些非常有意思的效果。還不僅如此。既然你已經(jīng)知道了如何限制一個(gè)背景圖像的重復(fù),那么如何讓它在背景區(qū)內(nèi)移動(dòng)呢?

當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計(jì)中的方向重復(fù)

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/background-repeat.html

上一篇:網(wǎng)頁設(shè)計(jì)中背景的良好實(shí)踐

下一篇:網(wǎng)頁設(shè)計(jì)中的背景定位

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