Html 使图像覆盖变暗，并在CSS中添加文本

我如何变暗（添加半透明覆盖）并向该图像添加文本（但水平和垂直居中），如下所示：

HTML

<img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation="fadeIn">

在这里拉小提琴：

试试这个

HTML:

---

要使文本水平居中和垂直居中，您需要将其包装在一个容器中，并使用

text align:center。然后可以使用伪元素将其垂直居中。对于覆盖，您可以为文本容器提供一种可以具有透明度的背景色：



正文{
边际：0px；
}
.包裹{
位置：相对位置；
}
.包裹img{
宽度：100%；
高度：自动；
显示：块；
}
.文本{
位置：绝对位置；
顶部：0；左侧：0；
宽度：100%；高度：100%；
背景：rgba（255255,5）；
文本对齐：居中；
}
.正文：之后{
内容：''；
宽度：1px；高度：100%；
垂直对齐：中间对齐；
显示：内联块；
}
.文本跨度{
显示：内联块；
垂直对齐：中间对齐；
}

图像上的文本

第二行

HTML
html

小提琴：
见下面我的答案
#top {
width: 100%;
height: auto;
}
body {
margin: 0px;
}

<img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation="fadeIn">
<div class="sometext">some text</div>

#top {
    width: 100%;
    height: auto;
    opacity:.3;
    position:absolute;
    z-index:0;
}
body {
    margin: 0px;
}
.sometext {
    position:absolute;
    z-index:1;
}

<div class='imgWrap'>
    <span>This is some very long text that might or might now flow on top of the image</span>
   <img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation=fadeIn">
</div>

.imgWrap{
    display:inline-block;
    background:#000;
    position:relative;
}

.imgWrap > img{ display:block; opacity:.5; }
.imgWrap > span{ position:absolute; display:table; text-align:center; z-index:1; height:100%; left:0; right:0; padding:20px; color:#FFF; font-size:2em; }
.imgWrap > span::after{ content:attr(data-title); display:table-cell; vertical-align: middle; }

<div id='back'><div id='mask'><div id='text'>fsfsfsssf</div></div></div>

body{
    margin:0px;
}
#back{
    width:100%;
    height:500px;
    background: url("http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg") no-repeat;
    background-size:contain;
}
#mask{
    position:relative;  
    width:100%; 
    height:500px; 
    background:rgba(255,255,255,0.5); 
}
#text{
    position:absolute;
    top:230px;
    left:48%;
}