您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)css選擇器能不能插入圖片,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
css選擇器可以插入圖片,如CSS選擇器“:before”和“:after”,其插入方法就是使用content屬性來(lái)插入圖片,使用語(yǔ)法如“.p_beforeImg:before {content: ''; background...”}。
本教程操作環(huán)境:Windows7系統(tǒng)、HTML5&&CSS3版本,該方法適用于所有品牌電腦。
推薦:《css視頻教程》
CSS選擇器:before、:after可以使用content屬性來(lái)插入圖片。
content 屬性與 :before 及 :after 偽元素配合使用,在元素頭或尾部來(lái)插入生成內(nèi)容。
說(shuō)明: 該屬性用于定義元素之前或之后放置的生成內(nèi)容。默認(rèn)地,這往往是行內(nèi)內(nèi)容,不過(guò)該內(nèi)容創(chuàng)建的盒子類型可以用屬性 display 控制。
認(rèn)識(shí) :before 和 :after
默認(rèn) display: inline;
必須設(shè)置 content 屬性,否則一切都是無(wú)用功, content 屬性也只能應(yīng)用在 :before 和 :after 偽元素上;
默認(rèn)user-select: none,就是 :before 和 :after 的內(nèi)容無(wú)法被用戶選中;
偽元素可以和偽類結(jié)合使用形如:.target:hover:after。
:before 和 :after 是在CSS2中提出來(lái)的,所以兼容IE8;
::before 和 ::after 是CSS3中的寫(xiě)法,為了將偽類和偽元素區(qū)分開(kāi);
CSS 中其他的偽元素有:::before、::after、::first-letter、::first-line、::selection 等;
不可通過(guò)DOM使用,它只是純粹的表象。在特殊情況下,從一個(gè)訪問(wèn)的角度來(lái)看,當(dāng)前屏幕閱讀不支持生成的內(nèi)容。
示例1:通過(guò)before添加三角尖圖片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3</title> <style type="text/css"> .p_beforeImg { background: #eeeeee; width: 200px; height: 80px; border-radius: 6px; padding: 10px 20px; position: relative; } .p_beforeImg:before { content: ''; background: url('../img/triangle_up.png') no-repeat top left /32px 16px;/*兼容沒(méi)測(cè)*/ position: absolute; top: -15px; z-index: 2; width: 32px; height: 16px; } </style> </head> <body> <p class="p_beforeImg">通過(guò)before添加三角尖圖片</p> </body> </html>
效果圖:
示例2:
把before的地方換成after,插入圖片樣式用一下的就行
.p_afterImg { background: #eeeeee; width: 200px; height: 80px; border-radius: 6px; padding: 10px 20px; position: relative; } .p_afterImg:after { content: ''; background: url('../img/triangle_down.png') no-repeat bottom right /32px 16px;/*兼容沒(méi)測(cè)*/ position: absolute; bottom: -15px; z-index: 2; width: 32px; height: 16px; }
效果圖:
關(guān)于css選擇器能不能插入圖片就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。