将rgba背景添加到多个不同的图像
将rgba背景添加到多个不同的图像
提问于 2018-04-17 09:14:55
我试图添加rgba背景到多个不同的图像。我正在使用引导带，我正在努力使它响应。但看起来好像出了什么问题。
这就是我想做的一个例子：
我在这里的代码(HTML)：
.text-caption {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.caption:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
}<div class="container">
<div class="row">
<div class="text-center">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/400x300/ffb3d1/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/400x300/c2f0c2/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/400x300/cc99ff/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
</div>
</div>
非常感谢你的帮助！
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-17 09:26:56
您只需要将z索引添加到绝对定位元素中，将相对定位添加到标题中，就可以使代码正常工作：
.text-caption {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:2;
}
.caption {
position:relative;
}
.caption:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
z-index:1;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/400x300/ffb3d1/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/400x300/c2f0c2/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/400x300/cc99ff/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-04-17 09:45:11
有几件事要注意：
- 选择的图像是巨大的，为了使其看起来适合他们所处的容器，
overflow: hidden包含在标题中。 - 我已将标题的高度限制在500 to。这允许自动缩放图像。
.text-caption {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.caption {
max-height: 500px;
overflow: hidden;
}
.caption:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
}
.caption>img {
width: auto;
height: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="text-center">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/4000x3000/ffb3d1/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/4000x3000/c2f0c2/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/4000x3000/cc99ff/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49874197
复制相关文章
相似问题
腾讯云开发者
