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でボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

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

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

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

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

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

no image

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

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

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

最新記事

チャーさん

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

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

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