Question

我正在尝试对图像使用叠加效果，但我无法完全符合图像的大小。

这是我的代码笔链接：https://codepen.io/saisree/pen/OmKMgm

<div class="row">
    <header class="text-center sec-heading">
        <h2>Meet the Family</h2>
        <span class="subheading">We are the ones!</span>
    </header>
    <div class="a col-lg-4 col-md-6 mb-sm-50">
        <img style="height:100%;width:100%;" class="a img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36" />
        <div class="overlay">
            <div class="text">Hello World</div>
        </div> 
    </div>
</div>

这是CSS：/ *。

.myjumbotron{
 background-color: black;
} */
#over img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.jumbotron {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
    background-position: center;
    background-size: cover;
}
h3{
    text-color:black;
}
#family h2{
    color: black;
    text-decoration:none;
}

#Nav h3{
    color: black;
    text-decoration:none;
}
/* .wrapper {
    position: relative;
    padding: 0;
    width:100px;
    display:block;
}
.text {
    position: absolute;
    top: 0;
    color:#f00;
    background-color:rgba(255,255,255,0.8);
    width: 100px;
    height: 100px;
    line-height:100px;
    text-align: center;
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.text:hover {
    opacity:1;
}


img {
    z-index:1;
}
 */
.text {
    white-space: nowrap; 
    color: black;
    font-size: 20px;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.a:hover .overlay {
    height: 100%;

}
  .b:hover .overlay {
    height: 100%;

}
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    overflow: hidden;
    width:100%;
    height: 0;
    transition: .5s ease;
}

/* .team-item {
    display:inline-block;
    background:red;
    margin-bottom:10px;
}
 */

任何形式的帮助都将受到高度赞赏！

Answer 1

您忘记将position: relative;提供给父母，请添加：

.a {
  position: relative;
}

＆＃13;

#over img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.jumbotron {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
    background-position: center;
    background-size: cover;
}
h3{
  text-color:black;
}
#family h2{
  color: black;
     text-decoration:none;
}

#Nav h3{
     color: black;
     text-decoration:none;
}

.text {
  white-space: nowrap; 
  color: black;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.a {
  position: relative;
}
.a:hover .overlay {
  height: 100%;
}
.b:hover .overlay {
  height: 100%;

}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  overflow: hidden;
 width:100%;
  height: 0;
  transition: .5s ease;
}

＆＃13;

  <div class="row">
    <header class="text-center sec-heading">
      <h2>Meet the Family</h2>
      <span class="subheading">We are the ones!</span>
    </header>
    <div class="a col-lg-4 col-md-6 mb-sm-50">
      <img style="height:100%;width:100%;" class="a img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36" />

      <div class="overlay">
        <div class="text">Hello World</div>
      </div>
    </div>
  </div>

＆＃13;

Answer 2

所以你可以看到它是如何工作的，我已经剥离了你的CSS，专注于这里需要的东西。

我认为你应该将图像和叠加div包装在另一个元素中，我已经给出了类inner-wrap，如下所示。此元素应为position: relative，因为它是图像和叠加层的父级。

然后，您可以提供叠加层position: absolute，使其按照父级放置。我已经将它拉伸到整个父母身上，并添加了半透明的背景颜色，这样您就可以更轻松地查看其中的内容。

＆＃13;

.inner-wrap {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.4);
  text-align: center;
}

＆＃13;

<div class="row">
  <header class="text-center sec-heading">
    <h2>Meet the Family</h2>
    <span class="subheading">We are the ones!</span>
  </header>
  <div class="a col-lg-4 col-md-6 mb-sm-50">
    <div class="inner-wrap">
      <img style="height:100%;width:100%;" class="a img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36" />
      <div class="overlay">
        <div class="text">Hello World</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

如何使叠加适合图像的精确尺寸？

2 个答案: