ニケラオ » ウェブログアーカイブ » CSS 3をもっと：background-originとbackground

» ウェブログアーカイブ » CSS 3 をもっと詳しく: background-origin と background-clip Niquelao CSS 3 をもっと詳しく: background-origin と background-clip 2009年12月13日、Rumoroso による 背景を制御するさまざまな CSS 3 プロパティの復習を続けて、今回は background-origin と background-clip の番です。これら2つのプロパティは、背景画像を配置する基準となる原点を制御したり、境界線の下に画像を表示できるようにしたりするのに役立ちます。 background-origin 背景の位置を計算する基準となる原点、つまり background-position プロパティの座標の原点を決定します。指定できる値は次のとおりです: border-box : 背景の位置が境界線を含む領域を基準に決定されます（つまり、境界線が不連続な場合、背景がその下に見える可能性があります）。 padding-box : これがデフォルト値で、パディングを含む領域を基準に背景の位置を決定します（CSS 2.1 の現在の挙動に相当します）。 content-box : 背景はコンテンツ領域を基準に配置されます。 background-clip 背景を表示する領域を決定し、次の2つの値を指定できます: border-box : これがデフォルト値で、境界線が占める領域に背景を含めます。 padding-box : 背景を表示する領域をパディングとコンテンツが占める領域に限定します。つまり、背景の原点が境界線にあっても、画像はその下には表示されません。 解説 いつものように、両方のプロパティを説明するにはスクリーンショット形式の例を見るのが一番です。これらの例では、要素が占める空間（ボックスモデルに従って）をシミュレートしています。つまり、境界線（太い灰色の点線）、パディング（境界線と細い破線の間の空間）、コンテンツ（破線で区切られた部分）です。始めましょう: 次の2つの画像の違いは何でしょうか？ 明らかに、両者の違いは、一方では背景が境界線の下に表示され、もう一方では表示されないことです。最初の画像の CSS は次のとおりです: background-origin: border-box; background-clip: border-box; …そして2番目の画像は次のとおりです: background-origin: border-box; background-clip: padding-box; では、次の画像の違いは何でしょうか？ 今度は違いは背景の原点にあります。最初の画像では、原点に境界線が含まれています: background-origin: border-box; …一方、2番目の画像ではパディングが原点になります: background-origin: padding-box; 最後に、今度の違いは何でしょうか？ : これもまた明らかです。最初の画像は、先ほどの例のペアの最初の画像と同様に、背景の原点が境界線の領域にあり、2番目の画像ではその原点がコンテンツ領域にあります: background-origin: border-box; と background-origin: content-box; お使いのブラウザが Firefox 、 Chrome 、 Safari 、 Konqueror の最近のバージョンであれば、両方のプロパティを適用した例のページにアクセスできます 。その他のブラウザ（例えば Internet Explorer や Opera）をお使いの場合も例にアクセスできますが、この場合はこれらのプロパティがサポートされていないときの結果を確認することになります。 注: Mozilla と WebKit は、独自の構文でこれらのプロパティを試験的にサポートしています。別の記事で説明したように、CSS 3 では複数の背景画像を含めることができます 。background-origin と background-clip プロパティは、使用する画像ごとに1つの値を指定できます。 最後に、例で背景に使用した画像についてもう一度触れておきます。それは Dolores が作った美味しいフルーツタルトで、私はそれを「いい子だったから」もらったのです…ええと、ただもらっただけです…いや、もらってはいませんが、子どものように楽しみました CSS 3 をもっと詳しく: background-origin と background-clip カテゴリ: CSS —> 1件のコメント Tweets that mention Niquelao » ウェブログアーカイブ » CSS 3 をもっと詳しく: background-origin と background-clip — Topsy.com 2009年12月14日 […] この投稿は Twitter で Jorge Rumoroso、Juanjo Fernández によって言及されました。Juanjo Fernández の発言: RT @rumoroso: #niquelao CSS 3 をもっと詳しく: background-origin と background-clip http://bit.ly/5wKoQt #CSS3 […] コメントの追跡は RSS 2.0 フィード で行えます。また、あなたのサイトからトラックバックを送ることもできます。 前の記事: Fish eye menu only with CSS Transform and Transition —> —> —> この作品は Creative Commons ライセンスの下にあります 。

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.