如何在子元素 bg-color 上显示父母的 bg-image？

Posted 2023-02-21

【中文标题】如何在子元素 bg-color 上显示父母的 bg-image？

【英文标题】：How to display parent's bg-image over child elements bg-color?

【发布时间】：2017-05-26 18:12:17

【问题描述】：

所以我有一个包含内容行的部分。线条覆盖了窗口宽度的 100%，但内容仅显示在部分的右侧。在左边必须有一个图像。我试图用 bg-image 和 z-index 来做，但问题是它被埋在线条的 bg-color 之下。所以我想知道是否有一种聪明的方法可以做到这一点，或者唯一的方法是使用内联图像标签？ 代码笔：https://codepen.io/anon/pen/KazpYM

<p>it is impossible to edit cofe on mobile so i just give u a link </>

【参考方案1】：

这是简单的破解方法:)

.line
    width: 100%;
    height: 200px;
  position:relative;
  z-index:-1;

【参考方案2】：

尝试使用position: relative - position: absolute。但一开始整个想法都错了。

.athletes 
  background-image: url(http://i.imgur.com/Ytf12qW.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: 45% 100%;
  background-size: 45% 100%;
  background-position: 14%;
  background-color: transparent;
  position: relative;
  min-height: 600px;

.line 
  width: 100%;
  height: 200px;
  z-index: -10;
  position: absolute;

.line-gray 
  background-color: #c1c1c1;
  bottom: 200px;

.line-violet 
  background-color: #5e42b0;
  bottom: 0;

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