如何在沒有父div的背景圖像的情況下讓子div

Question

我有兩個div：一個父母，一個孩子。

家長有背景圖片：

.parent{
  background-image: url('urltoimage/img.png');
  z-index: 1;
 }
.child{
  z-index: 2;
 }

但父級背景圖片仍覆蓋其子級的背景。 我希望那個孩子沒有背景圖片

我也嘗試使用z-index ，但沒有成功。

Answer 1

您沒有給孩子的圖像，也沒有為孩子指定任何背景色。 通過繼承屬性，子級繼承父級屬性，並覆蓋其指定的父級屬性的值。

您的代碼可能是這樣的：

.parent{
  background-image: url('urltoimage/img.png');
  z-index: 1;
 }
.child{
   background-image: url('urltoimage/CHILD_IMAGE.png');
   // or you could specify background color
   z-index: 2;
 }

Answer 2

編寫代碼的HTML部分時，可能是您做錯了，但是CSS看起來不錯。

HTML：

<div class="parent">
   <div class="child">
   </div>
</div>

這是你的方式嗎？ 也不要忘記在CSS中添加高度和寬度。

示例： 一個JSFiddle

Answer 3

如果您的子div沒有背景設置，則自然會顯示其父div背景。 如果您嘗試創建從父div切出孩子div的區域的效果。 然后，您可能必須使用其他方法。 一個示例可能是將孩子的背景設置為其父母的背景相同。 否則，其他人在這篇文章中提到的設置兒童div的尺寸和/或背景將是您的唯一選擇。

這是一個想法，您是否可以將.png圖像文件用於父級的背景圖像，而該背景圖像具有放置子div的透明區域？