如何在子元素bg-color上显示父级的bg-image? [英] How to display parent's bg-image over child elements bg-color?

问题描述

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

So I have a section with lines of content in it. The lines cover 100% of width of the window, the content, however, is only shown at the right side of section. On the left there must be an image. I tried to do it with bg-image and z-index but problem is its getting buried beneath lines' bg-color. So i wonder if there is a smart way to do it or the only way is to use inline image tag?
Codepen: https://codepen.io/anon/pen/KazpYM

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

推荐答案

尝试使用position: relative-position: absolute.但是最初，整个想法都是错误的.

Try use position: relative - position: absolute. But initially the whole idea of a wrong.

.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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！