HTML･CSS画像にグラデーションをかける方法

まあこ

HTML･CSS

202315Sep

画像にグラデーションをかける方法

画像ってそのままでもいいんだけど、
ちょっと手を加えてみたいな！と思って。

うん、じゃあどうするの？

そうね、画像にグラデーションをかけてみようと思うの！

そんなこともできるんだね。

そうなの、それじゃあ今回は、画像にグラデーションをかける方法
をご紹介していくわね。

　1,画像にグラデーションをかける方法

この画像にグラデーションをかける設定をしておくと、画像一つ一つにグラデーションをかける作業をしなくても、一括で指定した画像にグラデーションをかけることができるのでとても便利ですよ。
それでは、画像にグラデーションをかける方法をご紹介していきますね。まずはこちらのサンプル画像をご覧くださいね。

1-1,サンプル画像No,1

画像にグラデーションをかける方法

サンプル画像No,1:CODE

<style>
.example{
    position: relative;
}
.example img{
    width: 100%;
    height: auto;
}
.example>div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #ffffff;
    font-size: 38px;
    font-weight: bold;
    white-space: nowrap;/* 自動改行防止 */
}
</style>
<div class="example">
    <img src="https://blog-imgs-166.fc2.com/m/a/a/maakochannel/entry-3.jpg" alt="画像にグラデーションをかける方法">
    <div>画像にグラデーションをかける方法</div>
</div>

1-2,サンプル画像No,2

画像の上に文字を重ねる方法

サンプル画像No,2:CODE

<style>
.myimage{
    position: relative;
}
.myimage img{
    width: 100%;
    height: auto;
}
.myimage>div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #ffffff;
    font-size: 38px;
    font-weight: bold;
    white-space: nowrap;/* 自動改行防止 */
}
</style>
<div class="myimage">
    <img src="https://blog-imgs-166.fc2.com/m/a/a/maakochannel/entry-2.jpg" alt="画像の上に文字を重ねる方法">
    <div>画像の上に文字を重ねる方法</div>
</div>

1-3,サンプル画像No,3

画像にグラデーションをかける方法

サンプル画像No,3:CODE

<style>
.myimage{
    position: relative;
}
.myimage img{
    width: 100%;
    height: auto;
}
.myimage>div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #ffffff;
    font-size: 38px;
    font-weight: bold;
    white-space: nowrap;/* 自動改行防止 */
}
</style>
<div class="myimage">
    <img src="https://blog-imgs-166.fc2.com/m/a/a/maakochannel/entry-3.jpg" alt="画像にグラデーションをかける方法">
    <div>画像にグラデーションをかける方法</div>
</div>

上の画像は、グラデーションがかかっていないですよね。それに反して、下の2枚の画像は、グラデーションがかかっています。上の画像と下の2枚の画像との違いは

<div class="example">
<div class="myimage">

div classの違いだけなんですよね。
わたしのブログでは上の画像のexampleには何の設定もしていませんが、下の2枚の画像のmyimageにはHTMLとCSSで設定しています。では、その設定方法をご紹介していきますね。

　2,設定方法

2-1,HTML

Img要素をdiv要素で囲みます。グラデーションはこの囲んだ要素にかかってくるんですね。

<div class="myimage">
    <img src="https://blog-imgs-166.fc2.com/m/a/a/maakochannel/entry-2.jpg" alt="画像の上に文字を重ねる方法">
</div>

でも、imgタグだけでは擬似要素が設定できないので、囲み要素が必要になりCSSで設定するんですね。

2-2,CSS

囲んだ要素にpositionと擬似要素の設定をします。わたしのブログでは次のように設定しています。

/*=================================================
  画像グラデーション
==================================================*/
.myimage {
    position: relative;
}

.myimage::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
}
/*=================================================
 画像グラデーション終わり
==================================================*/

15行目の

background: linear-gradient(90deg, #000000, transparent);

でグラデーションの詳細な設定ができるんですね。
まず(90deg, #000000, transparent);の中の90degですが、これはグラデーションの角度（方向）を指定しています。指定しなければ、角度（方向）を省略することになります。
ちなみに角度値の代わりに、left, rightなどの位置を表すキーワードを使用して、グラデ―ショーンの角度（方向）を指定することもできます。toに続けて位置を表すキーワードを記述してくださいね。

グラデーションの角度（方向）の初期値、角度値180deg は to bottom
角度値0deg は to top
角度値90deg は to right
角度値270deg は to left
になります。
次の#000000, transparentはカンマ（ , ）で区切って指定していますが、グラデーションの開始色と終了色になります。
さらにその中間にカンマ（ , ）で区切って中間色を指定することもできるので、お好みに合わせて調整してみてくださいね。

　3,まとめ

今回は、画像にグラデーションをかける方法をiご紹介してきました。

● HTMLは、グラデーションをかけたい画像の「Img要素」を「div要素」で囲む。
● CSSは、囲んだ要素に「position」と「擬似要素」の設定をする。
● グラデーションの詳細な設定は、「background: linear-gradient」内で行う。
● さらに、カンマ（ , ）で区切って中間色を指定することができる。

この情報がお役に立てばブログランキングの応援お願いします。