雷速体育进球声怎么关:

您的位置:雷速体育答题测试答案 > html教程 > 怎么用css在圖片右下方添加文字

怎么用css在圖片右下方添加文字

時間:2017-08-31 08:26:31  來源:免費模板網 作者:風雪 閱讀次數 tagscss

有時候在一些廣告圖片的下面顯示“廣告”字眼,或者在gif動圖也有顯示,那么這個通過css怎么實現呢

111.jpg

我們來看html代碼

<a href="#" target="_blank">
<img src="#"><em>廣告</em>
</a>

在看em的css是怎么定義的,這么需要用到定義的屬性

a {
   display: block;
    position: relative;
}

父元素的 position: relative;然后我們在來設置em屬性

a em {
    position: absolute;
    right: 0;
    bottom: 0px;
    background: #fff;
    color: #666;
    padding: 0px 5px;
    border-radius: 3px 0 0 0;
    opacity: 0.3;
    font-size: 12px;
    font-style: normal;
}

然后子元素定位為 position: absolute;然后加上top ,left,bottom等屬性定位左上,左下  ,右上,右下

這樣就達到想要的效果了

來段完整的代碼

<style>
.demo a {
   display: block;
    position: relative;
}
.demo a em {
    position: absolute;
    left: 0;
    bottom: 0px;
    background: #fff;
    color: #666;
    padding: 0px 5px;
    border-radius: 3px 0 0 0;
    opacity: 0.3;
    font-size: 12px;
    font-style: normal;
}
</style>
<div class="demo">
	<a href="#" target="_blank">
		<img src="//www.384142.live/img/ucp.jpg"><em>廣告</em>
	</a>
</div>


本文地址://www.384142.live/htmljc/2017/0831/2881.html

猜你喜歡
欄目推薦
模板推薦

Copyright:雷速体育答题测试答案 www.384142.live 免費模板網 All Rights Reserved 雷速体育答题测试答案   遼公網安備 21010602000376號  遼公網安備:42900402000182號

免責聲明:本站部分資源來自互聯網收集,版權歸原創者所有,如果侵犯了你的權益,我們會及時刪除侵權內容,聯系QQ:1615187561 謝謝合作!

{ganrao}