我将如何变暗(添加半透明覆盖)并向该图像添加文本(但水平和垂直居中),如下所示:
HTML
<img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation="fadeIn">
CSS
#top {
width: 100%;
height: auto;
}
body {
margin: 0px;
}
在这里 fiddle :http://jsfiddle.net/6jf0nxd5/
最佳答案
要使文本水平和垂直居中,您需要使用 text-align:center;
将其包裹在容器中。然后你可以使用伪元素将其垂直居中。对于叠加层,您可以为文本容器提供一个可以具有透明度的 rgba()
背景色:
body {
margin: 0px;
}
.wrap{
position:relative;
}
.wrap img{
width:100%;
height:auto;
display:block;
}
.text{
position:absolute;
top:0; left:0;
width:100%; height:100%;
background:rgba(255,255,255,.5);
text-align:center;
}
.text:after{
content:'';
width:1px; height:100%;
vertical-align:middle;
display:inline-block;
}
.text span{
display:inline-block;
vertical-align:middle;
}
<div class="wrap">
<img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation="fadeIn" />
<div class="text"><span>Text over the image
<br/>Second line</span></div>
</div>
关于html - 使图像覆盖变暗并在 CSS 中在其上添加文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27148825/