どうも、チャーさんです。
cssで背景色を背景画像に重ねる方法が、
知りたい。そう思っていませんか？
この記事では、cssで背景色を
背景画像の上に重ねる方法を書いています。
なので、あなたがこの記事を読めば、
背景色を背景画像の上に重ねることが
できるようになります。
ということで、背景色を重ねたい場合、
このまま下にスクロールして読んでみてください。
スポンサードサーチ
cssで背景色を背景画像の上に重ねるにはこれ
ということで結論からです。
cssで背景色を背景画像の上に、
重ねる方法は以下です。
擬似要素を使って背景色を表示し、
position:absoluteで背景画像の上に、
重ねるです。
そうすれば、
こんな普通の背景画像に、
こうやって背景色を乗せることができます。
ということで、
擬似要素とposition:absoluteを
使えば背景画像に背景色を乗せることが
できます。
スポンサードサーチ
cssで背景色を重ねるためのコード紹介
で、ここからは上記のように背景画像に
背景色を乗せるためのコードを紹介します。
css
.img_box {
max-width:500px;
position:relative;
background:url(“cat.jpg”);
height:300px;
}
.img_box::before{
content:””;
background:blue;
width:20%;
height:100%;
position:absolute;
z-index:1;
}
html
<body>
<div class=”img_box”>
これはテキスト
</div>
</body>
仕組みと手順解説
ということでコードと仕組みを解説していきます。
まずは普通に背景画像を表示させます。
.img_box {
max-width:500px;
position:relative;
background:url(“cat.jpg”);
height:300px;
}
widthとheightを指定してますが、
これはみやすくするためなので特に
重要ではないです。
で、ここで大事なのが、
position:relativeです。
これが大事な理由は、
背景画像にposition:absoluteで、
背景色を乗せる場合、
背景画像の領域を起点にして、
absoluteを使うことができるからです。
仮にここにposition absoluteを
使わないと、画面サイズ全体に対して、
背景色が乗ってしまいます。
すると背景画像に背景色というのが
スムーズにできなくなるので、
position:relativeをつけましょう。
で次に背景色の部分に入ります。
.img_box::before{
content:””;
background:blue;
width:20%;
height:100%;
position:absolute;
z-index:1;
}
上記は実際の色の部分のコードです。
ここは擬似要素です。
擬似要素で、まず背景色を表示します。
さらにそこにwidthを指定することで、
背景画像のサイズに対して、
任意の幅の背景色を乗せることができます。
またheightを１００％にすると、
背景画像の高さいっぱいまで背景色が
縦に伸びてくれます。
ということでheightも指定しましょう。
で、今現状のままでは、
まだ背景色は背景画像の下にあるので、
表示されません。
ということで、ここでposition:absoluteを
書きます。
すると、背景色が背景画像の上に、
表示されます。
あとは、topやrightなどを使って、
背景画像の上に表示させた、
背景色を好きな場所に移動させましょう。
すると、背景画像の上に、
背景色を重ねることができます。
注意
擬似要素は、content:””;
と書かないと表示されないので、
忘れないように。
スポンサードサーチ
まとめ
それではまとめに入ります。
cssで背景色を背景画像の上に重ねるには、
擬似要素で背景色を表示させ、
position:absoluteで背景画像の上に、
重ねましょう、です。
こうすれば背景画像の上に背景色を
重ねることが可能です。
ということで、やり方がわかったと思いますので、
あなた自身で実践してみましょう。
そうすればあなたのweb制作スキルが上がり、
仕事獲得や、好きにサイトを作ることができるように
なります。
ということで、手順ですが、
まずは、表示させたい背景画像を用意し、
次に擬似要素を書きましょう。
そして背景色を擬似要素で表示したら、
position:absoluteで上に重ねましょう。
わからなかったら下のコードをサンプルに、
して取り組んでみてください。
コードサンプル
css
.img_box {
max-width:500px;
position:relative;
background:url(“cat.jpg”);
height:300px;
}
.img_box::before{
content:””;
background:blue;
width:20%;
height:100%;
position:absolute;
z-index:1;
}
html
<body>
<div class=”img_box”>
これはテキスト
</div>
</body>
ということでcssで背景色を背景画像の上に
重ねる方法でした。
では、読んでもらってありがとうございました。
それでは。
チャーさん
