<分区>
html - 字幕和图像重叠
标签 html css overlapping
由于对 HTML 和 CSS 非常天真，我无法做到这一点，除非创建图像。那么，我怎样才能创建与图像重叠并具有背景颜色的文本？
详细信息:
我有一个方形图片，我想添加一个重叠的文本。此文本应具有横跨整个图像的背景色，并且应垂直和水平居中，如图中所示。
我如何在 HTML+CSS 中做到这一点？我想避免创建图像。
谢谢!
最佳答案
我使用了企鹅的示例图像。
HTML 代码-
<div class="imageShadow textCenter">
<h2>Hello</h2>
</div>
CSS 代码-
.imageShadow {
background:
linear-gradient(
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.8)
),
url('http://amolife.com/image/images/stories/Animals/penguins%20(8).jpg');
background-size: cover;
width: 300px;
height: 200px;
margin: 10px 0 0 10px;
position: relative;
float: left;
}
.textCenter h2 {
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
font-size: 2rem;
transform: translate(-50%, -50%);
}
这里有一个 fiddle ，以防您想看到它的实际效果- http://jsfiddle.net/SarhadSalam/wut8gtwq/
关于html - 字幕和图像重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34273073/