図形の上に画像を重ねて配置する方法を教えてください。

Question

最近WEBのフロントエンド開発を始めまして、今HTMLとCSS、そしてJavaScriptを練習中なのですが、ずっといじっていてどうしても解決できないことがあります。

前提・実現したいこと

CSSで作成した四角形の図形の上に重ねて背面透過を施したPNG画像を配置したいとおもっています。

なってしまい、説明不足かもしれませんが、わかる方がいらっしゃればお教えください

Answer 1

その条件だと四角形の領域の中に普通にimg要素を置けば大丈夫かと思います。

<!--四角形の領域-->
<div class="bg-orange">
  <img src="/path/to/image.png">
</div>

.bg-orange {
  background-color: #FFA500;
}

Comments

[takio-]

ありがとうございます。おっしゃったとおりに実行したところ、解決することができました。