使图像叠加层变暗,并在CSS中添加文字 [英] Darken image overlay and add text over it in CSS
本文介绍了使图像叠加层变暗,并在CSS中添加文字的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将如何使该图像变暗(添加一个半透明的覆盖层)并向该图像添加文本(但水平和垂直居中),如下所示:
How would I darken (add a semi-transparent overlay) and add text to this image (but centred horizontally and vertically) as below:
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;
}
在这里拨弄: http://jsfiddle.net/6jf0nxd5/
推荐答案
要将文本水平和垂直居中,您需要将其包装在带有text-align:center;
的容器中.然后,您可以使用伪元素将其垂直居中.对于覆盖层,可以为文本容器提供rgba()
背景颜色,该颜色可以具有透明性:
To center the text horizontaly and verticaly, you will need to wrap it in a container with text-align:center;
. Then you can use a pseudo element to center it verticaly. For the overlay, you can give the text container a rgba()
background color that can have transparency :
DEMO
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>
这篇关于使图像叠加层变暗,并在CSS中添加文字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文