css

CSS3 グラデーションがChromeできかない

CSS3 グラデーションボタンを作るのように、CSS3では画像を使わずにグラデーションを作ることができます。
しかし、多くのサイトがプロパティの指定を

 background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#999999));　/* Safari,Google Chrome用 */ 

と紹介していますが、Chrome　バージョン 22の要素検証ツールでは、
Invalid property value.
というエラーになり、グラデーションになりません。

プロパティの指定は、

 background

ではなく

 background-image

にしないといけません。

上記の例だと、次のようになります。

 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#999999));　/* Safari,Google Chrome用 */ 

css

css 偶数の行だけ色をつける

CSS3で実装されたnth-childという疑似クラスがあり、たとえば表（テーブル）の、偶数行だけ色をつける、などということが簡単にできます。

 <!-- HTML -->
 <table class="zebra">
  <tr>
    <td>
      ボロネーゼ
    </td>
   </tr>
   <tr>
     <td>
       カルボナーラ
     </td>
    </tr>
  </table>

 /* css */
 table.zebra tr:nth-child(2n) td {
     background-color: #E9F4FC;
 }

css

css background-position が効かない

background-positionプロパティは、背景画像の表示位置を指定するプロパティです。
背景画像の表示開始位置を％値や数値で指定します。
各順番は、横方向・縦方向の順です。

 例）
 背景が本来始まるところから、左に10px、上から20pxのところから背景が始まる
 background-position:10px 20px;

しかし、これがうまく動作しない場合があります。
その場合は、

 background-repeat:no-repeat; 

という背景画像は繰り返さない、というプロパティと値を指定しましょう。

• bacgroundのスペル間違えてる — {2013-06-24 (月) 17:24:00}
• スペル間違いのご指摘、有難うございました！修正しておきました。 — 管理者 {2013-06-25 (火) 15:31:05}