css絕對定位後居中顯示文字
阿新 • • 發佈:2019-01-06
在圖片底部居中顯示文字,直接上程式碼:
<style>
.main {
width:300px;
height:200px;
text-align:center;
}
.title {
position:absolute;
width:300px;
height:20px;
left: 0;
right: 0;
bottom: 0;
background-color:rgba(0,0,0,0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7 f000000,endColorstr=#7f000000);
}
#設定背景半透明併兼容ie瀏覽器
</style>
<div class="main">
<img src="1.png" />
<p class="title">我要在圖片底部居中顯示</p>
</div>
效果如圖