Question

我有背景图片，但无法获得它周围的红色边框。这是我的HTML：

<div id="parentDiv" class="bg">
  <div class="row childDiv ">
    <div class="col-md-6">
      <img class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHvElQPvE4mpefl9D6qy2BmBsD2UCbKdJbn2I1kkpFRaTDoLhb2g" alt="" /></div>
    <div class="col-md-6">two</div>
  </div>
</div>

这是css：

#parentDiv {
    position: relative;
    border:3px solid red;
    padding:10px;
    /*width:100%;*/
    height:400px;
}


#parentDiv .childDiv {
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    border: 2px solid green;
    margin:5px;
}

/*todo responsive image style */
.bg
{
    background-image:url(https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
    background-repeat:no-repeat;
    background-size:contain;
    border: 1px solid black;
}

如何在backgroundimage周围获得红色边框？如何获得围绕childdiv的绿色边框？ codepen

Answer 1

CSS：

#parentDiv.bg{
  border:10px solid red;
}

必须为parentDg下的类bg指定CSS。你已经把它给了bg。添加上面的CSS。

您可以查看实时示例here in JSFiddle

Answer 2

请在小提琴中检查你的答案

https://codepen.io/anon/pen/zzrbvJ

#parentDiv {
    position: relative;
    border:3px solid red;
    padding:10px;
    height:400px;
}


#parentDiv .childDiv {
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    margin:5px;
}

.img-responsive {
    border: 2px solid green;
}

Answer 3

这种方式为两个图像提供了边框。如果您想要第二个图像周围的绿色边框，只需在图像中添加一个类（<img class="img-responsive border"...）并在CSS中添加边框属性。您可能不希望将边框属性添加到.img-responsive类，以防您在其他地方使用它。

.border {
  border: 2px solid green;
}

#parentDiv {
    position: relative;
    border:3px solid red;
    padding:10px;
    height:400px;

}


#parentDiv .childDiv {
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    margin:5px;
}

.bg {
    background-image:url(https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
    background-repeat:no-repeat;
    background-size:cover;

}

<div id="parentDiv" class="bg">
  <div class="row childDiv ">
    <div class="col-md-6">
      <img class="img-responsive border" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHvElQPvE4mpefl9D6qy2BmBsD2UCbKdJbn2I1kkpFRaTDoLhb2g" alt="" /></div>
    <div class="col-md-6">two</div>
  </div>
</div>

Answer 4

在css代码的末尾添加以下内容：

.img-responsive {
     border: 1px solid red;
}

css：如何获得图像边框？

4 个答案: