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

- お知らせ
- NEW 2023.11.23 【Photoshop】水彩風のテクスチャー作成ついて解説
- お知らせ
- 2023.11.16 【Photoshop】写真の一部を消す加工ついて解説
- お知らせ
- 2023.11.09 【Photoshop】鉛筆風フォントの作成について解説
こんな方に読んでほしい
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.22
2023.06.01
2022.06.10
2022.06.03
![]() |
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 新品価格 |
2023.11.23
2023.11.16
2023.11.09
2023.10.26
2023.10.12
2023.09.28
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog