透明度のプロパティについて

Question

teratailユーザーの皆様、お世話になります。
日々勉強中の新米IT職のMAYAKOです。

今回は、表題の通りに透明度のプロパティに関する質問をさせていただきます。
具体的にコードを添えてお答えいただけると助かります。

質問：イメージ画像とテキスト以外に透明度のプロパティを作用させるにはどのようにコードを入力しますか？
※コンテンツ内容の背景をやや透過させるため、全体の枠組みの#containerにopacity:08をかけています。
その中のimg（画像）やp,h1～h6（テキスト）にはその透明度のプロパティを適応したくありません。
今の私には、その部分だけをよけてrgbaのプロパティで一つずつちまちま設定するしか思いつきません。
もし、一括指定する方法があれば知りたいです。

どうぞ、よろしくお願いいたします。

Answer 1

グループ指定したらいいのではないでしょうか？
タグ単体だとid指定より詳細度が低くなるので!importantを付けるといいと思います。

img, p, h1, h2, h3(以下、要素いろいろ) {
  opacity: 1 !important;
}

それか、透明度を適用したい要素にだけ「class="transparent"」みたいな感じで書いて、

.transparent {
  opacity: 0.8;
}

という形にするとかですね。

Comments

[MAYAKO]

nisihunabasi様
ご回答ありがとうございます。
やや抽象的な質問にも関わらず、求めていた通りの回答をいただけましたので、nisihunabasi様の回答をベストアンサーとさせていただきます。
そのうちのどちらかを使用して、透明度のプロパティを機能させていきたいと思います。
ありがとうございました！

Answer 2

おつかれさまです！
具体的な要件が不明確なのですが、#containerの背景を単純に透明にしたいというご質問でよろしいでしょうか？

例えば、

#container {
    background-color: rgba(255, 255, 255, 0.75);
}

のように背景色プロパティをrgbaで設定してしまう方法と、

#container {
    background-image: url(/img/alpha.png);
}

のように、希望の透明度の透過pngを1px*1pxで作成し、背景画像としてリピートするという方法が思い浮かびました。

回答になっていますでしょうか…？お役に立てれば幸いです！

Comments

[MAYAKO]

hirai0110様
ご回答ありがとうございます。
自分でも、タグなどを図示したものを作成してから質問すればよかったかなーと思いましたが、いろいろなタグがごちゃごちゃして逆にわかりにくそうだったので中断してまいました。すみません。
背景画像のrepeatという発想はなかったので、今度別のサイトのサンプルを作るときに試してみようと思います。
ありがとうございました！