62
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

背景色(background-color)を透過させて文字色は不透明にする方法とhtml,slim,css,scssでの記述方法


今回は、背景色(background-color)は透過させたいけど文字は不透明(そのまま)にする方法をご紹介します。どちらも簡単なので、ぜひ参考にしてください(>ω<)

ポイントは色をカラーコードではなく、rgbaで指定することです。
今回は赤い半透明の背景色をつけてみたいと思います。
rgbaに簡単に変換してくれている便利なサイトをみつけました

rgba

r=red(赤)、g=green(緑)、b=blue(青)、a=alphachannel(アルファ)を表します。
アルファチャンネルは透明度を表します。
アルファチャンネルを指定しないと不透明な赤色の背景色がつきます。
スクリーンショット 2014-12-26 1.28.49.png

<h1>おでんと言ったらちくわぶ。</h1>
h1
    | おでんと言ったらちくわぶ。
h1 {
    background-color: rgb(255,0,0);
}
h1 {
    background-color: rgb(255,0,0);
}

アルファチャンネルを指定して透過させる

1に近ければ近い程、不透明に近くなります。
指定は小数点以下で表します。
スクリーンショット 2014-12-26 1.51.54.png

<h1>おでんと言ったらちくわぶ。</h1>
h1
    | おでんと言ったらちくわぶ。
h1 {
    background-color: rgba(255,0,0,0.5);
}
h1 {
    background-color: rgba(255,0,0,0.5);
}

文字色も透過させたい場合

文字色も一緒に透過させたい!そんな時はrgba指定ではなく、カラーコードとopacityというものを使って記述します。

スクリーンショット 2014-12-26 1.56.08.png

<h1>目玉焼きといったら醤油。</h1>
h1
    | 目玉焼きと言ったら醤油。
h1 {
    background-color: #ff0000;
    opacity: 0.5;
}
h1 {
    background-color: #ff0000;
    opacity: 0.5;
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
62
Help us understand the problem. What are the problem?