1. <span id="z4nqb"></span>

      background

      語法:

      background:[ <bg-layer>, ]* <final-bg-layer>

      <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

      <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <' background-color '>

      默認(rèn)值看每個(gè)獨(dú)立屬性

      適用于:所有元素

      繼承性:無

      動(dòng)畫性:看每個(gè)獨(dú)立屬性

      計(jì)算值:看每個(gè)獨(dú)立屬性

      取值:

      <' background-image '>:
      指定對(duì)象的背景圖像。可以是真實(shí)圖片路徑或使用漸變創(chuàng)建的“背景圖像”
      <' background-position '>:
      指定對(duì)象的背景圖像位置。
      <' background-size '>:
      指定對(duì)象的背景圖像的尺寸大小。
      <' background-repeat '>:
      指定對(duì)象的背景圖像如何鋪排填充。
      <' background-attachment '>:
      指定對(duì)象的背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。
      <' background-origin '>:
      指定對(duì)象的背景圖像顯示的原點(diǎn)。
      <' background-clip '>:
      指定對(duì)象的背景圖像向外裁剪的區(qū)域。
      <' background-color '>:
      指定對(duì)象的背景顏色。

      說明:

      復(fù)合屬性。檢索或設(shè)置對(duì)象的背景特性(背景色 <' background-color '> 不能設(shè)置多組)。
      • 一個(gè)元素可以設(shè)置多重背景圖像。
      • 每組屬性間使用逗號(hào)分隔。
      • 如果設(shè)置的多重背景圖之間存在著交集(即存在著重疊關(guān)系),前面的背景圖會(huì)覆蓋在后面的背景圖之上。
      • 示例:假設(shè)要在同一個(gè)元素上定義3個(gè)背景圖像

        縮寫方式:

        background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
        	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
        	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;

        注意, <' background-color '> 只能設(shè)置一次,且由于寫在前面的背景會(huì)疊在之后的背景之上,所以背景色通常都定義在最后一組上,避免背景色將圖像蓋住。

        拆分方式:

        background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
        background-repeat:no-repeat,no-repeat,no-repeat;
        background-attachment:scroll,scroll,scroll;
        background-position:10px 20px,10px 20px,10px 20px;
        background-size:50px 60px,70px 90px,110px 130px;
        background-origin:content-box,content-box,content-box;
        background-clip:padding-box,padding-box,padding-box;
        background-color:#aaa;
      • 如果定義了多個(gè)背景圖片,而其他屬性只有一個(gè)參數(shù)值,則表明所有背景圖片的該屬性都應(yīng)用同一個(gè)參數(shù)值。據(jù)此可以對(duì)上面的例子進(jìn)行縮寫:

        縮寫方式:

        background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
        background-repeat:no-repeat;
        background-attachment:scroll;
        background-position:10px 20px;
        background-size:50px 60px,70px 90px,110px 130px;
        background-origin:content-box;
        background-clip:padding-box;
        background-color:#aaa;

        如果定義了多個(gè)背景圖片,而 <' background-origin '> 和 <' background-clip '> 設(shè)置了相同的值??蛇@樣縮寫:

        縮寫方式:

        background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
        	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
        	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;

        這表示 <' background-origin '> 和 <' background-clip '> 都使用了padding-box參數(shù)值。

      兼容性:

      • 淺綠 = 支持
      • 紅色 = 不支持
      • 粉色 = 部分支持
      Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
      Basic Support 6.0+ 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
      Multiple backgrounds 6.0-8.0 2.0-3.5 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
      9.0+ 3.6+
      background-size #1 6.0-8.0 2.0-3.5 4.0-14.0 6.0-6.1 15.0+ 6.0-6.1 2.1-4.3 18.0+
      9.0+ 3.6+ 15.0+ 7.0+ 7.0+ 4.4+
      background-origin
      background-clip #2
      6.0-8.0 2.0-3.5 4.0+ 6.0+ 15.0+ 6.0+ 2.1-2.3
      9.0+ 3.6+ 3.0+
      1. <' background-size '> 寫入縮寫方式。
      2. <' background-origin '> || <' background-clip '> 寫入縮寫方式。

      示例:

      1. <span id="z4nqb"></span>
        日韩无码一二三四区 | 无码一页 | 亚洲天堂视频在线 | 国产露脸91国语对白 | 国产草草影院 | 日本最黄色片特一级生活片 | 先锋影音av在线资源 | 操逼视频毛片 | 天天干在线观看 | 人妖TS福利视频一二三区 |