孩子的背景色会覆盖父级的背景图片

Question

孩子的背景色会覆盖父母的背景图片

我有一个父图像，要求将其作为整个页面的背景。 现在，如果将背景色放入子div中，则父图像不可见。 我可以以某种方式将孩子的背景色放在父背景图片后面吗？甚至有可能吗？

尝试过这个：How to display parent's bg-image over child elements bg-color?

代码：https://codepen.io/anon/pen/KazpYM

但是提供的解决方案不起作用，因为我需要在子div中放置一些文本，这些文本应该在父背景图像上可见。

.athletes{
	background-image: url(https://i.imgur.com/Ytf12qW.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: 45% 100%;
	background-size: 45% 100%;
	background-position: 14%;
}

.line{
	width: 100%;
	height: 200px;
}

.line-gray{background-color: #c1c1c1;}

.line-violet{background-color: #5e42b0;}

<div class="athletes">
	<div class="line"></div>
	<div class="line line-gray"></div>
	<div class="line line-violet"></div>
</div>

Answer 1

如果仅希望子元素的背景是透明的，请使用rgba（x，x，x，opacity）设置颜色。如果要在父对象上具有透明图像，请使用:: after伪选择器并设置元素的不透明度。 这是一个适合您的示例。

.athletes{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.athletes::after{
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.5;
  position: absolute;
  z-index: -1;
 content: "";
 background: url(https://i.imgur.com/Ytf12qW.jpg) no-repeat center center/cover;
}

.line{
	width: 100%;
	height: 200px;
  display: flex;
  color: purple;
  justify-content: center;
  align-items: center;
  background-color: rgba(111,111,111,0.4)
}

.line-gray{background-color: rgba(222,222,0,0.4);}

.line-violet{background-color: rgba(127,177,0,0.4);}

<div class="athletes">
	<div class="line">item1</div>
	<div class="line line-gray">item2</div>
	<div class="line line-violet">item3</div>
</div>

希望有帮助，如果不清楚，请评论此答案。

Answer 2

不，你不能！ 您必须为孩子的背景使用背景色rgba！ 使用参数a，您可以设置颜色的不透明度！！！ 然后您可以看到父级背景图片。