Html 响应式大小图像引导程序上的图像叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21263800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image overlay on responsive sized images bootstrap
提问by RGilkes
I am trying to create a responsive grid of images (with descriptions) that when moused over will have a color overlay (just the image and not the text). Because of the responsive heights of the images, I am having an issue where the overlay covers everything and not just the image.
我正在尝试创建一个响应式图像网格（带有描述），当鼠标悬停在上面时会有一个颜色覆盖（只有图像而不是文本）。由于图像的响应高度，我遇到了覆盖覆盖所有内容而不仅仅是图像的问题。
Any way I can fix this?
我有什么办法可以解决这个问题？
I've recreated the issue here for easier understanding: http://jsfiddle.net/r8rFc/
为了更容易理解，我在这里重新创建了这个问题：http: //jsfiddle.net/r8rFc/
Here is my HTML:
这是我的 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>
And my CSS:
还有我的 CSS：
.project-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
padding: 50%;
}
Thanks in advance!
提前致谢！
回答by brouxhaha
Add a class to the containing div, then set the following css on it:
向包含的 div 添加一个类，然后在其上设置以下 css：
.img-overlay {
position: relative;
max-width: 500px; //whatever your max-width should be
}
position: relativeis required on a parent element of children with position: absolutefor the children to be positioned in relation to that parent.
position: relative需要在 children 的父元素上与该父元素相关的子元素position: absolute定位。
回答by Michelle
When you specify position:absolute it positions itself to the next-highest element with position:relative. In this case, that's the .project div.
当您指定 position:absolute 时，它会将自己定位到下一个具有 position:relative 的最高元素。在这种情况下，就是 .project div。
If you give the image's immediate parent div a style of position:relative, the overlay will key to that instead of the div which includes the text. For example: http://jsfiddle.net/7gYUU/1/
如果您给图像的直接父 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;
}
回答by ottis
If i understand your question you want to have the overlay just over the image and not cover everything?
如果我理解您的问题，您希望在图像上叠加而不是覆盖所有内容吗？
I'd set the parent DIV (i renamed in content in the jsfiddle) position to relative, as the overlay should be positioned relative to this div not the window.
我将父 DIV（我在 jsfiddle 中的内容中重命名）位置设置为相对，因为覆盖应该相对于这个 div 而不是窗口定位。
.content
{
position: relative;
}
I did some pocking around and updated your fiddle to just have the overlay sized to the img which (I think) is what you want, let me know anyway :) http://jsfiddle.net/b9Vyw/
我做了一些摸索，并更新了你的小提琴，只将覆盖层的大小调整为 img（我认为）这是你想要的，无论如何让我知道:) http://jsfiddle.net/b9Vyw/
回答by radix07
I had a bit of trouble getting this to work as well. Using brouxhaha's answer got me 90% of the way to what I was looking for. But the padding adjust wouldn't allow me to put the text anywhere I wanted. Using top and left seemed to work better for my purposes.
我也遇到了一些麻烦。使用 brouxhaha 的答案让我达到了我想要的 90%。但是填充调整不允许我将文本放在我想要的任何地方。使用 top 和 left 似乎更适合我的目的。
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
top: 80%;
left: 20%;
}
回答by vogonyo
<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
