CSSで背景画像を白っぽくしたりグラデーションにしたり

コーディング
スポンサーリンク

linear-gradientでグラデーションを作る

linear-gradient(方向, 始まりの色, 終わりの色)

今回は背景画像にグラデーションをかけたいのでbackground-imageにCSSを指定して行きます。

 

背景画像をグラデーション

色を白にしてグラデーションをかけるとフワッとした背景になりますね。

 

背景をオーバーレイ

始まりの色と終わりの色を同じ色にして全体的にオーバーレイをかける

 

背景画像をオーバーレイ、黒っぽく

文字がメインとなる見出しなどに使えますね。

方向の指定の仕方

グラデーションをかける場合、グラデーションになる方法を指定できます。
上に向かって色が薄くなる・・・、下に向かって黒っぽくする・・・などなど。

方法の指定の仕方1:キーワードで

to top (上に向かって)
to right (右に向かって)
to bottom (下に向かって) (初期値
to left (左に向かって)
to top right (右上に向かって)
to bottom right (右下に向かって)
to bottom left (左下に向かって)
to top left (左上に向かって)

 

方法の指定の仕方2:角度で

degを使って角度で方向を指定することもできます

background-image: linear-gradient(180deg, rgba(255,255,255,1),rgba(255,255,255,0.5)),url(画像のパス);

このように角度でも指定できますが、to top rightなどとキーワードで指定できるので、キーワード入力で十分事足りる気がします。

 

背景に円形のグラデーション

radial-gradient(形 サイズ 中心の位置, 始まりの色, 終わりの色)

最低限radial-gradient(始まりの色, 終わりの色)だけで中心からor中心にかけてグラデーションをかけることができます。

背景画像を中心からグラデーション

形の指定

ellipse 楕円型(初期値
circle まんまるの丸

 

サイズ、中心の位置も指定できますが私自身があまり使わないので割愛します(すみません・・)

 


このように簡単で使いやすいので是非使ってみてください。
少しでも参考になれば嬉しいです。

コメント

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