孩子的背景颜色覆盖父母的背景图片答案

【问题标题】：Child's bg color overrides parent's background image孩子的背景颜色覆盖父母的背景图片
【发布时间】：2019-12-27 16:14:20
【问题描述】：

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

我有一个父图像，需要作为整个页面的背景。现在，如果我将背景颜色放入子 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>

【问题讨论】：

也许他们想要这里的代码。单击edit，然后单击[<>] sn-p 编辑器并将代码发布到minimal reproducible example
另外，他们认为这是一个奇怪且不可能的要求 - 您可以为孩子添加透明度，但这可能不是您的意思？
@mplungjan 我尽力让问题保持整洁。将整个代码 sn-p 放在问题本身看起来会更糟。 codepen的链接有所有需要的sn-p。如果这是一个不可能的请求，他们也可以发表评论。
我发布了sn-p。请提供您的问题的minimal reproducible example 并提供预期输出，并忽略不赞成票
是的，我同意，但我是少数：meta.stackexchange.com/questions/135/…

标签： html css

【解决方案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>

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

【讨论】：

对不起，但这并不能解决问题，我希望父母的背景图片与孩子的背景颜色重叠，但孩子的文字应该在父母的背景图片之上。任何一种图像/颜色的透明度/不透明度都不能满足我的需要。
@AdamsHales 那么在子元素中使用背景颜色有什么意义呢？

【解决方案2】：

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

【讨论】：