使图像叠加层变暗并在 CSS 中添加文本

Answer 1

要将文本水平和垂直居中，您需要将其包装在带有

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>

Answer 2

html

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

CSS

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%;
}

小提琴：http://jsfiddle.net/6jf0nxd5/20/

Answer 3

试试这个

HTML：

<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>

CSS：

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

Answer 4

http://jsfiddle.net/6jf0nxd5/21/

HTML

<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>

CSS：

.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; 
}