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の学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

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

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

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

最新記事

チャーさん

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

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

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