Question

所以我有一段内容包含其中的内容。线条覆盖窗口宽度的100％，但内容仅显示在截面的右侧。在左边必须有一个图像。我尝试用bg-image和z-index来做这件事，但问题是它被埋没在线条之下＆＃39; BG-颜色。所以我想知道是否有一种聪明的方法来做它或唯一的方法是使用内联图像标签？
Codepen：https://codepen.io/anon/pen/KazpYM

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

Answer 1

这是简单的黑客攻击方式：）

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

Answer 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>

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

2 个答案: