HOME > > > CSSで共通の要素につけた背景を任意の要素だけ消す方法

CSSで共通の要素につけた背景を任意の要素だけ消す方法

CSSで共通の要素につけた背景を任意の要素だけ消す方法

共通で背景を設定した場合に任意の箇所のみ背景を消す

ウェブサイトを作っていて共通箇所はなるべくCSSでまとめてしまいたい。でも、共通箇所の中で1つだけ違う設定が必要なんて事がたまにあります。
背景色なんかも全部同じにしたい場合、例えばdiv全部に設定しちゃうなんて事もありますが、その中の1ヶ所は背景いらないんだよなぁ~って事がたまにありました。
そんな時はその1ヶ所に別のclassを追加して、背景を消しちゃいましょう。

1ヶ所だけ背景を抜く

例えば以下の様にdiv全てに背景色「赤」を入れるとします。
その場合のCSSは以下の様にします。


div{
 background-color: red;
}

この様にdivに対して「background-color」を設定するとdivで囲った部分が全て背景色が赤になります。
そこで1ヶ所だけ背景色を抜きたい場合は以下の様に設定します。

HTML


<div class="none">ここの背景を抜く</div>

CSS


.none{
 background-color: transparent;
}

background-colorに値の「transparent」を設定する事で、背景を透明化します。

transparentとは

transparentは透明な・透き通るという意味で、CSSの値で設定すると背景色を透過する事ができます。
ただし、背景色の透過が対応していないバージョンのブラウザでは透過する為の処理は別途必要となりますので、
ブラウザ確認を忘れず行ってください。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket