在响应大小的图像上叠加图像bootstrap

我试图创建一个图像响应网格（带有说明），当被蒙上阴影时会有一个颜色叠加层（只是图像而不是文本）。由于图像的响应高度，我遇到覆盖层覆盖所有内容而不仅仅是图像的问题。在响应大小的图像上叠加图像bootstrap

任何方式我可以解决这个问题？

我在这里重现问题的更容易理解：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%; 
}

提前感谢！

来源

2014-01-21 RGilkes

添加类内含div，然后在其上设置以下的CSS：

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

position: relative需要小儿position: absolute为孩子父元素被定位在相对于该父。

DEMO

来源

2014-01-21 16:47:24 brouxhaha

完美地工作！谢谢！！ – RGilkes

没问题。请注意，在图像不相邻的尺寸处，需要使用“最大宽度”。如果没有设置宽度（或最大宽度）或100％的图像，叠加层会延伸到图像的外部，因为div默认会扩展到其父项的大小。您可以通过调整小提琴结果区域并去除最大宽度来看到这一点。 – brouxhaha

美妙...谢谢 –

当您指定的位置是：绝对是自我定位与位置下一个最高元素：相对的。在这种情况下，这就是.project div。

如果您为图片的直接父div提供位置样式：相对，则覆盖图将键入该位置，而不是包含文本的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; 
}

来源

2014-01-21 16:48:42 Michelle

工程！我不能做两个答案，但我已经投票了！谢谢你的帮助！！ – RGilkes

如果我理解你想有影像重叠在图像上，而不是面面俱到你的问题？

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

.content 
{ 
    position: relative; 
}

我做了一些波金格周围并更新你的小提琴只是有覆盖大小的IMG这（我认为）是你想要的，让我反正知道:) http://jsfiddle.net/b9Vyw/

来源

2014-01-21 16:57:33 ottis

我有一点麻烦得到这个工作以及。使用brouxhaha的回答让我获得了90％的待遇。但填充调整不会让我把文本放在任何我想要的地方。使用顶部和左侧似乎更适合我的目的。

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

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

来源

2016-06-10 20:29:15 radix07

在响应大小的图像上叠加图像bootstrap

回答

相关问题