[英]Darken image overlay and add text over it in CSS
如何變暗(添加半透明疊加層)並向此圖像添加文本(但水平和垂直居中)如下所示:
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;
的容器中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:
<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;
}
http://jsfiddle.net/6jf0nxd5/21/
<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; }
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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.