免費模板網標簽tags 更多...
整站模板下載

加入代代SEO你會得到什么?

1、

代代論壇,實戰原創教程/附軟件+課件 (終身)!

2、

代代SEO會員群,提供售后問答 永久加群。

3、

主流空間商服務器核心永久代理,官方5-7折。

4、

輔助排名系統/整站排名系統 永久核心代理。

5、

千套源碼/官網單獨售價幾百R的源碼 永久VIP!

6、

站群/泛解析類程序“精品論壇”永久VIP。

7、

親測各類插件/工具/源碼等收費資源 永久下載。

8、

終身會員價格298,加入聯系QQ:1615187561

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

雷速体育雷速号答题:怎么用css在圖片右下方添加文字

時間:2017-08-31 來源:網上收集 作者:Tony 閱讀次數 tagscss

雷速体育答题测试答案 www.384142.live 有時候在一些廣告圖片的下面顯示“廣告”字眼,或者在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號

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

{ganrao}