1. <tt id="5hhch"><source id="5hhch"></source></tt>
    1. <xmp id="5hhch"></xmp>

  2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

    <rp id="5hhch"></rp>
        <dfn id="5hhch"></dfn>

      1. 解讀html中background-image的屬性設置

        時間:2020-11-13 15:19:00 HTML DOM 我要投稿

        解讀html中background-image的屬性設置

          對于圖片,首先我們先想到是背景圖片。因為我們許許多的裝飾都是用背景圖片來實現(xiàn)的。既然這樣,那么就從CSS控制背景圖片講起吧。

          定義和用法

          background-image 屬性為元素設置背景圖像。

          元素的背景占據(jù)了元素的全部尺寸,包括內(nèi)邊距和邊框,但不包括外邊距。

          默認地,背景圖像位于元素的左上角,并在水平和垂直方向上重復。

          1.CSS控制背景圖片:

          對于一個網(wǎng)頁,我們開始設計的時候,可能沒有過多的去想背景圖到底是什么,因為大多都是設計背景色就可以了,原因嗎,我想也很簡單,因為它與前景音樂一樣,對于網(wǎng)頁的打開,速度會有一定的影響。不過對于一般的個人網(wǎng)站,或者個人博客而言,它對展現(xiàn)自己的個性,當然是不可或缺的了,當然什么都不會太過完美,有好就有壞,也就是當圖像不可用但CSS可用的時候,替換內(nèi)容就不會顯示出來,因此,并不建議在導航按鈕文本或類似的情況中使用CSS背景圖片。

          控制背景圖片的CSS屬性有很多,只要與圖片的相關的,大多都會用的上。

          (1)、背景圖片的導入:

          當然大家最熟悉的當然是background與background-image了。

          為網(wǎng)頁設計背景圖片的代碼是:

          body {background:url("d:images4.jpg")}

          或者

          body {background-image:url("d:images4.jpg")}

          這樣的話,我們就能將想要作背景的圖片導進網(wǎng)頁里了。

          (2)、背景圖片的顯示方式:

          當然,只用上面的.代碼,是無法表達出自己想要的效果的。因為,圖片小了,就會以平鋪的方式,如果是大了,為顯示它,就是會出現(xiàn)滾動條,這樣多不好。因此,我們還得多其進行顯示控制,也就是要用到background-repeat,

          它是取值:

          repeat : 默認值。背景圖像在縱向和橫向上平鋪

          no-repeat : 背景圖像不平鋪

          repeat-x : 背景圖像僅在橫向上平鋪

          repeat-y : 背景圖像僅在縱向上平鋪

          而代碼,我想只要懂一點CSS的都知道,如下:

          body {background:url("d:images4.jpg");background-repeat:no-repeat}

          這樣的話,它就是以原圖像大小顯示了。

          (3)、背景圖片的大小控制:

          不過問題是,倘若圖片過大了,又怎么辦呢?對于一個好網(wǎng)頁來說,最好不要用太大的圖片,原因上面也說過了,影響打開網(wǎng)頁的速度。我們最好還是用PS或者FireWorks處理一下。不過既然我提到了,我們也不防用CSS來實現(xiàn)圖片大小的控制。

          我想很多人會自然而然的用上如下代碼:

          呵呵,想法是好的,但你所用的瀏覽器支持嗎?我想IE或者FF一定會當作沒看見吧。也許你會問,我曾經(jīng)設計論壇風格時,是可以實現(xiàn)的。课蚁,如果只是上面的代碼的話,那是不可控制圖片的,因為它只是控制BODY的大小。當然,這里也是控制不了的。如果是其它的ID標記,我想是可以控制記標記的范圍大小,呵呵,當然也就不是圖像的大小了。

          說實話,這個問題不僅困擾著你們,同時也困擾著我。因為它只是一個屬性的值,而不是一個真正的對像。呵想到了用CSS控制的話,記得告訴我哦。

          補充:W3C于9月10發(fā)布了一篇名為《CSS Backgrounds and Borders Module Level 3》的應文章,里面為CSS的背景加上了幾個我們從未見的屬性:

          background-clip :

          background-origin :

          background-size :背景尺寸。

          background-break :

          雖然是有了這些屬性,不過現(xiàn)在還沒有支持它們的瀏覽器。真是好苦惱啊。

          (4)、背景圖片的位置控制:

          背景圖片,我科是導進來了,但是它的位置真有一點無法讓人接受。因為它默認的是左上對齊。但是我們卻不想這樣子放置,那我們又該怎么辦呢。不要著急,激動人心的時刻馬上到來,現(xiàn)在,讓我們來認識一下background-position、background-position-x及background-position-y吧。

          a.基本語法:

          background-position : length || length

          background-position : position || position

          background-position-x : length | left | center | right

          background-position-y : length | top | center | bottom

          b.語法取值:

          length :百分數(shù) | 由浮點數(shù)字和單位標識符組成的長度值。

          position : top | center | bottom | left | center | right

          c.示例:

          body { background-image: url("d:images4.jpg"); background-position: 50% 50%; background-repeat:no-repeat; }

          body { background-image: url("d:images4.jpg"); background-position-x: 50%; background-repeat:no-repeat; }

          body { background-image: url("d:images4.jpg"); background-position-y: 50%; background-repeat:no-repeat; }

          對于取值為length | top | center | bottom我只寫下面三個例子。

          body { background-image: url("d:images4.jpg"); background-position: top right; background-repeat:no-repeat; }

          body { background-image: url("d:images4.jpg"); background-position: 50% center; background-repeat:no-repeat; }

          body { background-image: url("d:images4.jpg"); background-position: 60px center; background-repeat:no-repeat; }

          說了這么多例子,我想你對于定位,有一定的了解了吧。

          (5)、背景圖片的透明設置:

          有的時候,我們總想著去將圖片設置成透明的。

          (6)、多幅背景圖片的設置:

          對于多幅背景圖片的設置,我是在《超越CSS:WEB設計藝術精髓》里看到的。不過,卻又讓我很遺憾,因為,目前支持一個標簽內(nèi)有多幅背景圖片的瀏覽器太小了,我知道的也只有Apple Safari 。以許你會問,這怎么可能。當你看完這個實例之后,我想你會驚訝,“天啊,CSS3之前都只能給每個元素使用一幅圖片!比绻胙芯恳幌碌脑挘涂炜彀惭b一個SAFARI瀏覽器吧。對我而言,我相信,這是發(fā)展的趨勢?傊痪湓,誰解釋CSS能力越強,它就將是發(fā)展的潮流,誰俱有完美的WEB準標,誰就是明日瀏覽器之星。

          代碼如下:

          body {

          background-image:

          url("d:mypic01.png"),

          url("d:mypic02.png");

          url("d:mypic03.png");

          url("d:mypic04.png");

          background-repeat:

          no-repeat,

          no-repeat,

          no-repeat,

          no-repeat,

          repeat-x,

          repeat-y,

          repeat-x,

          repeat-y,

          background-position:

          top left,

          top right,

          bottom right,

          bottom left,

          top left,

          top right,

          bottom right,

          bottom left;}

        【解讀html中background-image的屬性設置】相關文章:

        1.在HTML中的tabIndex屬性

        2.了解HTML中table表格的frame和rules屬性

        3.HTML字體標記及屬性

        4.HTML meta viewport屬性說明

        5.HTML5&details標簽屬性

        6.HTML 行間距的設置方法

        7.如何設置html虛線邊框的方法

        8.html文字加超鏈接設置

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码

        1. <tt id="5hhch"><source id="5hhch"></source></tt>
          1. <xmp id="5hhch"></xmp>

        2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

          <rp id="5hhch"></rp>
              <dfn id="5hhch"></dfn>