具有背景图像的两个独立元素-我需要两个背景都位于两个元素后面

Question

我的页面中有两个单独的元素，每个元素都有一个背景图像。我希望两个背景都在两个元素的后面。我已经坐了两个星期，无法克服它。需要一些帮助..！

红色箭头（在上面的链接中的照片中）是两个元素。两行文字。我希望两者的背景都在后面，并完整地看到这两行

这是我的CSS：

docker run -it --env-file $FILE -v $PWD/scripts:/t -w /t  dev_machine loadBase.sh

Answer 1

正如@לבנימלכה所说，将z-index与position: relative选项一起使用。 也许这个小型讲座会有所帮助[CSS Tricks] z-index BY SARA COPE

此外，您应该附加您的代码-这可能很有用。

Answer 2

增加第一个元素的值z-index

请参见小提琴：https://jsfiddle.net/hw8pz76e/3/

 .first{
   width:150px;
   height:150px;
    position: absolute;
    bottom: 15%;
    right: 3%;
    font-family: 'Heebo', sans-serif;
    font-weight: 900;    
    font-size: 5rem;
    color: rgb(255, 131, 30);
    white-space: nowrap;
    overflow: hidden;
    z-index: 32;
    background: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
    background-repeat: no-repeat;
    background-size: 115%;
    background-position: center;
}

.second{
     width:150px;
   height:150px;
    margin: 1rem;
    position: absolute;
    bottom: 0px;
    right: 8%;
    font-family: 'Heebo', sans-serif;
    font-weight: 900;
    font-size: 6.5rem;
    color: orange;
    white-space: nowrap;
    overflow: hidden;
    z-index: 30;  
    background: url('https://material.angular.io/assets/img/examples/shiba2.jpg');
    background-repeat: no-repeat;
    background-size: 110%;
    background-position: center;  
}

<div class="first"></div>
<div class="second"></div>