Question

我想在我的圆形图像上放置一个叠加层，但是当我设置它时，叠加层不能正确显示在图像上？它正在填充列div。不是覆盖容器。覆盖容器可以根据其内部的图像调整大小吗？我尝试了display:inline-block;但这不起作用。我正在使用Bootstrap。

HTML代码

   <div class="row" style="background-color:#ECECEC">
            <div class="col-md-4 col-sm-4" >
                <div class="overlaycontainer">
                    <img class="roundimg" src="images/george1x1.jpg" > 
                    <div class="overlay">
                        <div class="overlaytext">Hello World</div>
                    </div>
                </div>
                <center><h3>George Jones <br><small>Owner and Founder</small></h3></center>

            </div>

CSS

    .overlay{
position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
  border-radius: 50%;
  display:inline-block
}
.overlaycontainer{
display:inline-block
}
.overlaycontainer:hover .overlay{
opacity: 1;
}
.overlaytext{
color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.roundimg{
    max-width: 75%;
    height: auto;
    border-radius: 50%;
    padding-top:10px;
    display: block;
    margin: 0 auto;
}

任何帮助都将不胜感激。

由于乔

Answer 1

通过使用我能够链接到的占位符图像进行此工作演示，我能够更好地工作。

http://codepen.io/anon/pen/ryYaWx?editors=1100

然后将position: relative添加到.overlaycontainer选择器，如下所示：

.overlaycontainer {
  display: inline-block;
  position: relative; /* <-- this was added*/
}

这样做是因为您将.overlay设置为position: absolute，并且您希望绝对定位相对于.overlaycontainer而不是整个页面。添加这一行就可以了。

覆盖没有正确调整CSS的大小

1 个答案: