如何在没有父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的透明区域？