Question

您好我如何在div后面设置图像，适合浏览器宽度的图像。我有这个代码，但它无法正常工作。我希望图像看起来像这样way我的意思是如何在图像之间建立这条线。

.phone{
    margin:0 auto;
    background: url(images/umow1.png);
    width:74px;
    height:74px;
}
.phone:after{
    content: url(images/kreska2.png);
    position: relative;
    top: 20px;
    max-width:300px;
    width:100%;
    left: 72px;
}
.message{
    margin:0 auto;
    background: url(images/napisz1.png);
    width:74px;
    height:74px;
}
.location{
    margin:0 auto;
    background: url(images/odwiedz1.png);
    width:74px;
    height:74px;
}

Answer 1

您需要使用z-index，这样您就可以将线与您的圈重叠。这是我的示例代码，这将使您更容易理解这个概念：http://jsfiddle.net/C2yW4/

CSS

#linear,
#circle-group {
    position: absolute; /*we need a position so we can use z-index.*/
}
#linear {
    top: 100px;
    width: 350px;
    z-index: 0; /*It means the layer is at the most bottom*/
}
#circle-group {
    z-index: 1; /*This layer will be displayed upfront than the lower value*/
}
.circle {
    background: #65CA22;
    border-radius: 100px;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 50px;
}

HTML

<div id="parent">
    <div id="linear">
        <hr />
     </div>
     <div id="circle-group">
         <div class="circle"></div>
         <div class="circle"></div>
         <div class="circle"></div>
     </div>
</div>

确保应用绝对/固定/相对位置，以便z-index可以工作。

如何在div后插入图像

1 个答案: