响应大小图像引导程序上的图像叠加答案

【问题标题】：Image overlay on responsive sized images bootstrap响应大小图像引导程序上的图像叠加
【发布时间】：2014-02-11 09:09:48
【问题描述】：

我正在尝试创建一个响应式图像网格（带有描述），当鼠标悬停时将有一个颜色覆盖（只有图像而不是文本）。由于图像的响应高度，我遇到了覆盖覆盖所有内容而不仅仅是图像的问题。

有什么办法可以解决这个问题？

为了便于理解，我在此处重新创建了问题：http://jsfiddle.net/r8rFc/

这是我的 HTML：

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div>
                <img src="http://placehold.it/500x500" class="img-responsive"/>
                <div class="fa fa-plus project-overlay"></div>
            </div>
            <div style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>

</div>

还有我的 CSS：

.project-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    padding: 50%;
}

提前致谢！

【问题讨论】：

标签： html css responsive-design twitter-bootstrap-3

【解决方案1】：

将一个类添加到包含的 div 中，然后在其上设置以下 css：

.img-overlay {
    position: relative;
    max-width: 500px; //whatever your max-width should be 
}

position: relative 需要在具有position: absolute 的子元素的父元素上，以便子元素相对于该父元素进行定位。

DEMO

【讨论】：

完美运行！谢谢！！
没问题。请注意max-width 是图像不相邻的尺寸所必需的。如果没有设置宽度（或最大宽度）或 100% 的图像，则叠加层会延伸到图像之外，因为默认情况下 div 会扩展到其父级的大小。您可以通过调整小提琴结果区域的大小并删除最大宽度来看到这一点。
叠加的文字似乎没有居中。
文本居中，但它正在扩展到整个屏幕宽度，因此与图像不对齐。这应该使用任何类型的网格系统来处理，但是我通过在包含文本的 div 中添加 max-width 来编辑 jsfiddle，因此它与所有宽度的图像对齐。
它适用于矩形，但您需要调整叠加层的填充以适应图像高度的变化：jsfiddle.net/r8rFc/1040

【解决方案2】：

当您指定 position:absolute 时，它会将自身定位到具有 position:relative 的下一个最高元素。在这种情况下，这就是 .project div。

如果您为图像的直接父 div 赋予 position:relative 样式，则叠加层将作为该样式的键，而不是包含文本的 div。例如：http://jsfiddle.net/7gYUU/1/

 <div class="parent">
    <img src="http://placehold.it/500x500" class="img-responsive"/>
    <div class="fa fa-plus project-overlay"></div>
 </div>

.parent {
   position: relative;
}

【讨论】：

有效！我不能做两个答案，但我赞成！谢谢你的帮助！！

【解决方案3】：

如果我理解您的问题，您希望只在图像上叠加而不覆盖所有内容？

我将父 DIV（我在 jsfiddle 的内容中重命名）位置设置为相对位置，因为叠加层应该相对于这个 div 而不是窗口定位。

.content
{
  position: relative;
}

我做了一些调查并更新了你的小提琴，只将覆盖层调整为 img 的大小（我认为）这是你想要的，无论如何请告诉我 :)http://jsfiddle.net/b9Vyw/

【讨论】：

【解决方案4】：

我也遇到了一些麻烦。使用 brouxhaha 的答案让我找到了我想要的东西的 90%。但是填充调整不允许我将文本放在我想要的任何地方。使用 top 和 left 似乎更适合我的目的。

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 80%;
    left: 20%;
}

http://jsfiddle.net/1rz0b7d8/1/

【讨论】：

【解决方案5】：

<div class="col-md-4 py-3 pic-card">
          <div class="card ">
          <div class="pic-overlay"></div>
          <img class="img-fluid " src="images/Site Images/Health & Fitness-01.png" alt="">
          <div class="centeredcard">
            <h3>
              <span class="card-headings">HEALTH & FITNESS</span>
            </h3>
            <div class="content-inner mt-5">
              <p class="lead  p-overlay">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsam nemo quasi quo quae voluptate.</p>
            </div>
          </div>
          </div>
        </div>


.pic-card{
     position: relative;

 }
 .pic-overlay{

    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: background-color 0.5s ease;

 }
 .content-inner{
    position: relative;
     display: none;
 }

 .pic-card:hover{
     .pic-overlay{
        background-color: $dark-overlay;

     }

     .content-inner{
         display: block;
         cursor: pointer;
     }

     .card-headings{
        font-size: 15px;
        padding: 0;
     }

     .card-headings::after{
        content: '';
        width: 80%;
        border-bottom: solid 2px  rgb(52, 178, 179);
        position: absolute;
        left: 5%;
        top: 25%;
        z-index: 1;
     }
     .p-overlay{
         font-size: 15px;
     }
 }



enter code here

【讨论】：