Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.


今回は、背景色(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;
}
mikuhonda
Webデザイナー。 いまはあんまりガツガツやっていません。。
http://wantastique.com
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