半透明な要素内に透けない要素を表示

今回作るもの

半透明(opacityが1未満)な要素内に、透けない要素を配置してみます。
完成させたサンプルはこちら。

今回解決したい事

半透明な要素内に、半透明にしたくない要素を普通に配置しても透けてしまう。しかし、内部の要素まで半透明になってしまうと、実現したいデザインと異なってしまうので透明にはしたくない。

今回はこれを解決したものを作成します。

• 失敗例
• 成功例
• 問題点

これらを順に記載していきます。

失敗例

画面サンプルはこちら

index.html

<div class="wrapper">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" alt="sample image" class="centering-img">
</div>

index.css

.wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  background: blue;
  opacity: 0.5;
}
.centering-img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  margin: auto;
}

最初はこの方法で作成してみたのですが、親要素であるwrapperが透明になってしまうと、子要素である画像も半透明になってしまう結果になりました。

失敗例を踏まえて。「背景色を画像と同じ階層に配置してみれば出来るかも？」と考えて作成した見たものが次の成功例になります。

成功例

index.html

<div class="wrapper">
  <div class="background"></div>
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" alt="sample image" class="centering-img">
</div>

index.css

.wrapper {
  position: relative;
  width: 300px;
  height: 300px;
}
.background {
  background: blue;
  opacity: 0.5;
  height: inherit;
}
.centering-img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  margin: auto;
}

wrapperで背景色を表現することをやめ、imgと同じ階層にいるブロック要素で背景色を表現してやれば上手くいきます。
このHTML構造であれば、「背景色を半透明にしつつ、中の画像は半透明にしない」というデザインが実現できます。

問題点

今回作成したものは、要素の大きさを基本的に決め打ちで作成しているため、内部の要素に応じて親要素の大きさが変わる場合には使えないという問題があります。

ということで、内部の要素を文章に変更したものを作成してみました。

問題点を解消したサンプル

index.html

<div class="text-wrapper">
  <div class="background"></div>
  <p class="text">
  Lorem ipsum dolor sit amet, feugiat oporteat has in. Detracto maiestatis scripserit per ea, elitr possim id vix. Cu utroque periculis est, vim eros nonumes ponderum ad, ei sea impetus molestiae. Augue impetus volumus no pri, qui odio audiam comprehensam ei, sea debitis definitiones eu. Quo nostro legendos voluptatibus ex. Elit laudem ancillae nec ne.

Minim simul ocurreret est ne, ad has aliquam minimum, duo quod elitr ex. Ne erat nominati rationibus pro. Eos congue omittantur interpretaris ex, quo eu agam detraxit dignissim. Ferri nominavi appellantur mei cu. His fugit doming alterum ad, eu duo elitr soluta reprimique. Mea eros bonorum accusamus id, inermis vocibus similique ut cum, reque labores ius te.

Ne qui facete partiendo vituperata. Quis democritum his ad. Eos quidam animal incorrupte cu. Summo aliquid mnesarchum at per, prima iusto concludaturque ne mea. Pri id hendrerit elaboraret, sea ridens singulis eu, quis aeque at vix. An eos liber iudico rationibus, eam vidisse molestie cu, eam id feugiat nusquam cotidieque.
  </p>
</div>

index.css

.text-wrapper {
  position: relative;
  width: 300px;
}
.background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: orange;
  opacity: 0.6;
}
.text {
  position: relative;
}

初めに作成したサンプルと異なり、子要素のコンテンツが画像ではなく文章に変更、親要素の大きさが可変するようになっています。

まとめ

実装に手間取ったので、備忘録として書いてみました。
実装でイケてない部分があったり、違う方法があったりする場合はコメントで教えて頂けると嬉しいです！