叠加层大小不正确 CSS答案

【问题标题】：Overlay not sizing correctly CSS叠加层大小不正确 CSS
【发布时间】：2017-04-20 07:08:22
【问题描述】：

我想在我的圆形图像上放置一个叠加层，但是当我设置它时，叠加层没有正确显示在图像上？它正在填充列 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;
}

任何帮助将不胜感激。

谢谢乔

【问题讨论】：

标签： html css image twitter-bootstrap

【解决方案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 而不是整个页面。添加此行即可。

【讨论】：