css 背景画像

cssで背景色を背景画像の上に重ねる方法「コードつき」

投稿日:

Pocket

うも、チャーさんです。

 

cssで背景色を背景画像に重ねる方法が、

知りたい。そう思っていませんか?

 

この記事では、cssで背景色を

背景画像の上に重ねる方法を書いています。

 

 

なので、あなたがこの記事を読めば、

背景色を背景画像の上に重ねることが

できるようになります。

 

ということで、背景色を重ねたい場合、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

cssで背景色を背景画像の上に重ねるにはこれ

 

ということで結論からです。

 

cssで背景色を背景画像の上に、

重ねる方法は以下です。

 

擬似要素を使って背景色を表示し、

position:absoluteで背景画像の上に、

重ねるです。

 

 

そうすれば、

 

猫

 

こんな普通の背景画像に、

 

css 背景色を背景画像に重ねる

こうやって背景色を乗せることができます。

 

 

ということで、

擬似要素と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を100%にすると、

背景画像の高さいっぱいまで背景色が

縦に伸びてくれます。

 

ということで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で背景色を背景画像の上に

重ねる方法でした。

 

では、読んでもらってありがとうございました。

 

 

それでは。

 

チャーさん

 

-css, 背景画像


スポンサードサーチ

関連記事

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。