- HOME
- > BLOG CATEGORY
- 【CSS】グラデーションを背景画像に重ねてみよう!

- お知らせ
- NEW 2023.06.01 【CSS】画像の透過について、mix-blend-modeを使ってみよう
- お知らせ
- 2023.05.18 【WordPress】各ページ背景画像の指定についてbody_classを解説
- お知らせ
- 2023.05.11 【WordPress】CPT UI インポート/エクスポート機能について解説
こんな方に読んでほしい
repeating
の使い方について学びたい方へ上の図のように、rgbaを指定することにより、背景画像にグラデーションを重ねることができます。
指定方法もとても簡単ですので最後まで読んでいただきたいです。
gradientを指定することにより、線形・円形のグラデーションが可能になります。
repeatingを指定することにより、ストライプ柄を実装しよう!
[記事の内容]
rgba
を指定しグラデーションを重ねます。
rgba(数値01,数値02,数値03,透明度)による指定方法になります
RGBAとは、色を示すRGBのred・green・blueとさらに透明度の指定をします。
覚えておきましょう!
1.数値01にはredの赤の数値、数値02にはgreenの緑の数値、数値03にはblueの青の数値
数値についてはrgb(「0~255」,「0~255」,「0~255」)になります。
2.透明度を0(透明)~1(不透明)で指定になります。
書き方は以下のようになります。
background: linear-gradient(位置, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) ,url(画像パス);
45degの方向を指定し、開始色は明るいオレンジ(#F8E5C5)、終了色は暗いオレンジ(#EF7101)を
rgba指定に置き換えています。
linear-gradient
SHU BLOG
<div class="gradient">
<p>SHU BLOG</p>
</div>
.gradient {
/*--グラデーション指定以外 省略--*/
background: linear-gradient(45deg, rgba(248, 229, 197, 0.8), rgba(239, 113, 1, 0.8)),url(画像パス);
background-size: cover;
}
上の図のように、deg
指定が可能になります。
0〜360、(-)マイナスの指定が可能になります。
またdeg以外にも方向の指定方法ができます。
前回の記事にキーワードでの指定方法についての解説もあります。
ellipse
楕円のグラデーションを指定し、at center
要素の中央が中心から広がる指定になります。
radial-gradient
SHU BLOG
<div class="gradient">
<p>SHU BLOG</p>
</div>
.gradient {
/*--グラデーション指定以外 省略--*/
background: radial-gradient(ellipse at center, rgba(248, 229, 197, 0.8), rgba(239, 113, 1, 0.8)),url(画像パス);
background-size: cover;
}
前回の記事にキーワードでの指定方法についての解説もあります。
今回は参考サイトのご紹介です!
2種類の色を選択し、線形、円形を選ぶだけです。コードも発行できます。
簡単にグラデーションを作成してくれます。コピペで簡単に貼り付け可能です。
グラデーションのイメージを確認でき、パターンが豊富!!
今回はこれで以上です。
IllustratorやPhotoshopでグラデーションは可能ですが、
今回は3回にわたりグラデーションについて書かせていただきました。
皆さんもいろんなパターンを試してみてください
2023.06.01
2022.06.10
2022.06.03
2021.08.10
2023.06.01
2023.05.18
2023.05.11
2023.05.09
2023.05.04
2023.04.27
2022.06.30
2020.03.22
2020.03.06
2020.02.22
© 2020 shu-naka-blog