【CSS】グラデーションが後ろのCSSで消せない!【トラブル解決】

注:この記事は旧ブログからの移転中です。読みづらい点があることをご容赦下さい。

 

こんにちは!(2018/12/8)

グラデーションの指定を後ろのCSSの背景色で上書き消去したい場合、

「background-color」では無く
「background」で背景色を指定する

目次(クリックでジャンプ)

スポンサーリンク

現状と目標

h3要素の背景が左から右へ、白から透明のグラデーションになっている。
CSSはこんな感じ(色のプロパティのみ示す。また下線はafter要素で指定している)

カスタムCSSを表示

.post h3{
color: #696969;
background: linear-gradient(to right,#fff 50%,rgba(255,255,255,0));
}

↑背景グラデーションが「background」で指定されているのに注目

この表示を、こんな感じにしたい

ググってみると…普通、CSSは後ろのCSSで上書きされていくのですが、「background」プロパティは、「background-color」プロパティで上書きできないようですね。
それなら、背景色を「background-color」ではなく、「background」で指定してみると

こうなります!

グラデーションが消えて、希望通りの表示に♪

あとがき

このように、「background」プロパティは強力なので、グラデーションを設定する場合のように特別な理由が無い限り使用を控えたほうがよさそうです。

一つ勉強になりました。

タイトルとURLをコピーしました