Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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を最初の要素にのみ適用する方法

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

no image

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

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

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

cssでテーブルの行間を広げる方法

どうも、チャーさんです。 あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いて …

no image

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

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

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

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

no image

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

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

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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