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中添加高度和宽度。

示例：a JSFiddle

Answer 3

如果您的孩子div没有背景设置，那么它的'父div背景将会显示出来是很自然的。如果您正在尝试创建从父div中删除子div的区域的效果。然后，您可能必须使用不同的方法。一个例子可能是将孩子的背景设置为与其“父母”父母的背景相同。否则，在这篇文章中提到的关于设置孩子div的维度和/或背景的内容将是你唯一的追索权。

这是一个想法，您可以使用.png图像文件作为父级背景图像，该图像文件具有将放置子div的透明区域吗？

如何从父div中获得没有背景图像的子div

3 个答案: