所以我有一个部分,里面有几行内容。这些线条覆盖了窗口宽度的 100%,但是,内容仅显示在部分的右侧。左边一定有一张图片。我试图用 bg 图像和 z 索引来做到这一点,但问题是它被埋在线条的 bg 颜色下面。所以我想知道是否有一种聪明的方法可以做到这一点,或者唯一的方法是使用内联图像标签?
代码笔:https://codepen.io/anon/pen/KazpYM
<p>it is impossible to edit cofe on mobile so i just give u a link </>
这是简单的黑客方法:)
.line{
width: 100%;
height: 200px;
position:relative;
z-index:-1;
}
尝试使用 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>