2009/01/29

background-color

background-color | background-position | background-repeat
background-color

設定元件背景的顏色,通常簡化成 background:顏色值。特徵值可設為:

  1. <color>:顏色值
  2. transparent:透明,此為預設值。
  3. inherit:繼承父元件特徵。
  • 風格用法:

     <div style='width:200px; color:red'>射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. <p style='background-color:red; width:200px;color:white; 
      position:relative; top:-100px' >Not ask what your country can do for you, ask what you can do for your country. </p></div>

  • 執行結果:

    射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.

    Not ask what your country can do for you, ask what you can do for your country.

使用 transparent

  • 風格用法:

     <div style='width:200px; color:red'>射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. <p style='width:200px;color:white; 
      position:relative; top:-100px' >Not ask what your country can do for you, ask what you can do for your country. </p></div>

  • 執行結果:

    射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.

    Not ask what your country can do for you, ask what you can do for your country.

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

  • 風格用法:

     <style type='text/css'>
    .bkg {border:solid 1px green;}
    .bkg:link, .bkg:visited
         {background:black; color:white; text-decoration:none}
    .bkg:hover {background:red; color:white}
    .bkg:active {background:blue;}
    </style> <a class=bkg href='javascript:void(0)'> 射擊遊戲, 益智遊戲, 好玩遊戲, 小遊戲, 冒險遊戲. </a> 

  • 執行結果:

    射擊遊戲, 益智遊戲, 好玩遊戲, 小遊戲, 冒險遊戲.

javascript 應用。可以用 style 物件 的特徵 backgroundColor 作動態變化。此範例使用到 toggleCSS()

  • 風格用法:

     <div id='test' style='background:red ; width:200px; height:150px'>射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. </div><script type='text/javascript'>
    function toggleCSS(id, pty, v1, v2, ms)
    {
      var os=document.getElementById(id).style;
      os[pty]= (os[pty] == v1 ) ? v2 : v1;
      setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms);
    }
    toggleCSS("test", "backgroundColor", "red", "blue", 500);
    </script> 

  • 執行結果:

    射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.