WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:擬似要素に全角文字を設定すると文字化けが起きる
HOME
次の記事:ツール等を使わずにEXCELのデータを一括でMySQLのテーブルに移す方法

CSSのopacityプロパティが意図しない範囲まで適用される問題の解決法

Web知識

 

夜桜

上の画像には opacity: 0.5(半透明); を適用してあります。ご覧の通りオブジェクトの透過設定を簡単に行えるCSSプロパティです。

しかし、opacityで設定した透過度はオブジェクト全体に適用され、子要素にopacityで新たな値を与えても、親の透過度を打ち消す事が出来ないという少々厄介な特性を持っています。

 

半透明の黒いテキストボックスの中のテキストも透過している

ブログにサムネイル付きのページ送り機能を実装する際、opacityプロパティが持つ弊害に直面しました。

半透明の黒いテキストボックスの上に白のテキストを置きたかったのですが、テキストボックスに適用した半透明の設定がテキスト自体にまで適用されています。先述した通り、子要素であるテキスト側に opacity: 1(完全に不透明); を設定しても、透過度が上書きされる事はありません。

この問題は、opacityプロパティを使わず、テキストボックスの背景色を半透明の黒に設定する事で解決しました。

 

テキストボックスは半透明の黒、文字色は白

<div style="background: rgba(0, 0, 0, 0.5);">
 <span style="color: #ffffff;">白いテキスト</span>
</div>

rgbaの4つ目の値はアルファ値、つまり透過度の設定になります。仮に赤い半透明にしたい場合は rgba(255, 0, 0, 0.5); というようにすればいいですね。

 

CSSのopacityプロパティが意図しない範囲まで適用される問題の解決法

0件のコメント

コメント

カテゴリ

月別アーカイブ