CSSで背景を透過させる方法3つを徹底解説

CSSで背景画像を設定するときに、そのままだと画像の色が濃くて目立ち過ぎてしまうことがあります。そんな時に画像を少し透過させることで問題を解決できます。

しかし、使用する画像を編集して透過させるには工程が多く、とても面倒です。

今回は、CSSの記述のみで背景画像を透過させて見やすくする方法を紹介します。

背景画像を透過させて、文字を見やすくする方法はWebサイトを作る上では必須の知識です。この記事を読んで、オシャレなデザインができるように知識を付けましょう。

記事後半では、グラデーションに透過させてオシャレにする方法も紹介しますので最後までご覧ください。

CSSで背景を透過させる方法は3つ

CSSを用いて背景を透過させる方法は、

上記の3種類があります。

それぞれの方法の使い方と注意点を解説していきます。

opacityを使って透過させる

opacityとは、英語で「不透明度」という意味です。言葉のとおり要素の不透明度を指定します。

初期値は1で、0.0~1.0の値を指定することができます。数値が低くなるにつれて透明度が上がっていきます。

簡単なコードで解説します。

まずは、opacityの指定が無い状態のコードです。

HTML
 <div class="haikei">
    <div class="toumei">
        <h2>opacityを使ってない時</h2>
    </div>
</div>

CSS
.haikei{
  width: 400px;
  height: 200px;
  background-image: url(computer.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
}
h2{
  line-height: 200px;
  color: rgb(235, 14, 117);
  font-size: 30px
}

上記のhaikeiクラスにopacity:0.3;を記述して透過させます。

CSS
.haikei{
  width: 400px;
  height: 200px;
  background-image: url(computer.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
  opacity: 0.3;
}

上記の画像のように、要素全体を透過させることができました。

しかし、h2の見出しまで透過してしまうのでopacityは要素が重なっている場合には透過には向いていません。画像のみを透過させたり、マウスがホバーした時に透過させたい時にopacityは使用します。

擬似要素とposition、z-indexを使用して背景を透過させる

opacityでは、背景だけでなく子要素まで透過してしまいます。ここから紹介する2つの方法で、親要素の背景のみを透過させましょう。

まず、擬似要素である::afterとposition、z-indexを使用した方法から紹介します。

コードを見ながら解説します。

HTML
<div class="haikei">
        <h2>擬似要素::afterを使用</h2>    
</div>

CSS
.haikei{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 200px;
  background-image: url(computer.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
}
.haikei::after{
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
  background-color: white;
  opacity: 0.5;
}
.haikei>h2{
  position: relative;
  z-index: 3;
  color: rgb(235, 14, 117);
}

コードを一つずつ紐解いていきます。

CSS
.haikei{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 200px;
  background-image: url(computer.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
}

まずCSSで親要素のhaikeiクラスにposition:relativeとz-index:1を記述します。

CSS
.haikei::after{
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
  background-color: white;
  opacity: 0.5;
}

続いて、擬似要素::afterにposition:absoluteとz-index:2を記述して親要素の表面に被せるように配置します。

widthとheightを100％にてしておくことで親要素と同じ幅にできます。

background-color:whiteとopacity:0.5を指定すると背景が白っぽく透過した状態を表現できます。擬似要素::afterはcontentの記述は必須なので覚えておきましょう。

CSS
.haikei>h2{
  position: relative;
  z-index: 3;
  color: rgb(235, 14, 117);
}

親要素に擬似要素を被せただけでは子要素のh2まで透過してしまうので、h2に対してもposition:relativeとz-index:3を記述します。すると、h2が最表面に表示されることで透過しない状態を表現することができるのです。

擬似要素の::afterや::beforeはややこしいですが、一度使い方に慣れると表現の幅を広げることができます。今後もCSSを学習していく上では頻繁に出てくるので習得しておく必要があります。

background-color:rgba();を使って背景を透過させる

擬似要素やpositionは少しややこしく、記述が複雑になりがちです。そんな時に簡単に背景を透過できるbackground-color:rgba();を使うことをおすすめします。

ここからはbackground-color:rgba();を使用して背景のみを透過させる方法を紹介します。

まずは、background-colorで背景を透過させるためのrgbaについて解説します。

rgbaは色と透明度を詳細に指定する

rgbaとは、red、green、blue、alphaの頭文字を取っています。赤と緑、青の3色の比率を調整することで様々な色を表現できます。alphaは透明度を指し、opacityと同様の値を指定できます。

赤の透過なしの場合は、rgba(255,0,0,1)で表現することができます。

白の透過なしの場合は、rgba(255,255,255,1)、黒の透過なしの場合は、rgba(0,0,0,1)で表現することができます。

rgbaの指定方法を踏まえた上で、背景を透過させる方法を紹介します。

background-color:rgba();で背景のみを透過させる

background-colorを記述する場所は、背景画像を指定した親要素の一段階下の子要素になります。簡単なコードで解説します。

HTML
<div class="haikei">
    <div class="toumei">
        <h2>background-colorで背景を透過</h2>
    </div>
</div>

CSS
.haikei{
  width: 400px;
  height: 200px;
  background-image: url(computer.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
}
.toumei{
  background-color: rgba(255, 255, 255, 0.562);
}
h2{
  line-height: 200px;
  color: rgb(235, 14, 117);
  font-size: 30px
}

上記のコードでは、toumeiクラスにbackground-colorを記述して背景を白っぽく透過させています。alphaの値を低くすることで透明度は増します。

background-colorの色と透明度を変更することで、背景の透過具合を変更することも可能です。

少し暗めに透過させたいのであれば、

CSS
.toumei{
  background-color: rgba(0, 0, 0, 0.26);
}

background-colorで指定する色を変更することで、色を付けて透過させることもできます。少し青っぽくしたいのであれば、

CSS
.toumei{
  background-color: rgba(0, 0, 255, 0.219);
}

このように、背景の色や透過の割合を自由に決めることができるのがbackgroud-colorです。

注意としては、親要素にbackground-colorを指定しても透過させることはできません。一段階下のブロック要素に指定することを忘れないようにしましょう。

CSSで背景をグラデーションに透過させる

ここまでは、単純に背景を透過させるだけの方法を紹介しました。

ここでは、背景にグラデーションを掛けながら透過させる方法を紹介します。グラデーションにすることで少しオシャレに透過させることもできます。

グラデーションさせる方法は下記の2種類があります。

それぞれ使い方を解説します。

上下左右にグラデーションするbackground:linear-gradient();

上下左右にグラデーションさせるには、背景画像を指定した一階層下のブロック要素にbackground:linear-gradient();を指定します。

linear-gradientの値は、

CSS
〇〇{
background:linear-gradient(to グラデーションさせる向き,スタート位置の色コード 0%,最終位置の色コード 100%);
}

グラデーションさせる向きはtop、bottom、left、rightを指定することができ、上下左右のどこに向かってグラデーションさせるかを決めます。例えば、topを指定したのであれば下から上に向かってグラデーションをします。

その後に色コードを順番に記述していきます。今回は透過させるので色コードはrgbaで記述することをおすすめします。

簡単なコード例を紹介します。

HTML
<div class="haikei">
    <div class="toumei">
        <h2>グラデーションに背景を透過</h2>
    </div>
</div>

CSS
.haikei{
  width: 400px;
  height: 200px;
  background-image: url(computer.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;  
}
.toumei{
  background:linear-gradient(to top, rgba(255, 255, 255, 0.678) 0%,rgba(0, 0, 0, 0.822) 100%);
}
h2{
  line-height: 200px;
  color: rgb(235, 14, 117);
  font-size: 30px
}

上記コードのtoumeiクラスの詳細を解説します。

CSS
.toumei{
  background:linear-gradient(to top, rgba(255, 255, 255, 0.678) 0%,rgba(0, 0, 0, 0.822) 100%);
}

to topは下から上に向かってグラデーションをさせると命令しています。その後の rgba(255, 255, 255, 0.678) 0%はグラデーションがスタートする0%の時の色コードを記述しています。ここでは白色を透過した状態です。rgba(0, 0, 0, 0.822) 100%はグラデーションが終わる100%の時の色コードを記述します。今回は黒色を透過した状態です。

続いて、左右にグラデーションするCSSを紹介します。先程のtoumeiクラスのみを変更します。

CSS
.toumei{
  background:linear-gradient(to left, rgba(255, 255, 255, 0.678) 0%,rgba(0, 0, 0, 0.822) 100%);
}

上記のコードでは左に向かってグラデーションしていることがわかります。

3色でグラデーションさせることも可能です。

CSS
.toumei{
  background:linear-gradient(to left, rgba(240, 10, 10, 0.678) 0%,rgba(10, 14, 240, 0.822) 50%,rgba(11, 223, 28, 0.822) 100%);
}

50%の状態での色コードを記述することで3色にグラデーションすることができました。

上下左右にグラデーションさせる方法は、Webデザインでも使うことがあります。グラデーションができることだけでも覚えておきましょう。

円形にグラデーションするbackground:radial-gradient();

背景の透過を円形にグラデーションさせたい場合は、background:radial-gradient();を使用します。

記述方法をしては、

CSS
〇〇{
    background: radial-gradient(円の中心の位置を指定, 円の中心の色を指定 0%,円の一番外側の色を指定 100%);
}

内側から外側に向かってグラデーションをするようなイメージです。

簡単なコード例を紹介します。

HTML
<div class="haikei">
    <div class="toumei">
        <h2>グラデーションに背景を透過</h2>
    </div>
</div>

CSS
.haikei{
  width: 400px;
  height: 200px;
  background-image: url(computer.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
}
.toumei{
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.712) 0%,rgba(255, 255, 255, 0.7) 100%);
}
h2{
  line-height: 200px;
  color: rgb(235, 14, 117);
  font-size: 30px
}

中心から外に向かってグラデーションしていることがわかります。

コードの詳細を見てみましょう。

CSS
.toumei{
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.712) 0%,rgba(255, 255, 255, 0.7) 100%);
}

circle at centerで円の中心を要素の中央に指定します。 rgba(0, 0, 0, 0.712) 0%は中心の色を指定し、rgba(255, 255, 255, 0.7) 100%は一番外側の色を指定します。

円形にグラデーションさせる際も色を付けることが可能です。

CSS
.toumei{
  background: radial-gradient(circle at center, rgba(27, 5, 228, 0.849) 0%,rgba(87, 230, 106, 0.52) 100%);
}

上記のコードでは円の中心は青、一番外側の色は緑で記述しています。

円形にグラデーションさせることで、背景画像を透過させる方法のバリエーションを増やすことができました。

ただ単に背景を透過させるだけでなく、グラデーションをかけて透過をすることができればオシャレに背景を彩ることも可能です。

実際に使う頻度は少ないかもしれませんが、グラデーションにできることだけでも覚えておいてください。

CSSで背景を透過させる方法：まとめ

CSSで背景を透過させる方法を3つ紹介しました。

3つの中でも一番簡単で、実際に使用しやすい方法が、background-color:rgba();です。これだけを覚えておくだけでも透過させるのには悩まないかもしれませんが、他の方法も存在することだけでも覚えておきましょう。

さらに、背景をグラデーションに透過させる方法も紹介しました。グラデーションに透過することができれば、一層オシャレに見せることも可能です。

背景画像ファイルを編集できれば一番良いですが、CSSで編集しないといけない時もあります。今回の記事を読んで、CSSで背景を透過させる方法をマスターしてください。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！