首頁 >web前端 >css教學 >css選擇器可以插入圖片嗎

css選擇器可以插入圖片嗎

藏色散人原創: 2020-12-21 09:51:513775瀏覽

css選擇器可以插入圖片，如CSS選擇器“:before”和“:after”，其插入方法就是使用content屬性來插入圖片，使用語法如“.p_beforeImg:before {content: ' '; background...”}。

css選擇器可以插入圖片嗎

本教學操作環境：Windows7系統、HTML5&&CSS3版本，此方法適用於所有品牌電腦。

推薦：《css影片教學》

CSS選擇器:before、:after可以使用content屬性來插入圖片。

content 屬性與 :before 及 :after 偽元素配合使用，在元素頭或尾部來插入生成內容。

說明：此屬性用於定義元素之前或之後放置的生成內容。預設地，這往往是行內內容，不過該內容創建的盒子類型可以用屬性 display 控制。

認識:before 和:after

預設display: inline;

必須設定content 屬性，否則一切都是無用功， content 屬性也只能套用在:before 和:after 偽元素上；

預設user-select: none，就是:before 和:after 的內容無法被使用者選取；

偽元素可以和偽類別結合使用形如：. target:hover:after。

:before 和:after 是在CSS2中提出來的，所以相容於IE8；

::before 和::after 是CSS3中的寫法，為了將偽類和偽元素區分開；

CSS 中其他的偽元素有：::before、::after、::first-letter、::first-line、::selection 等；

不可透過DOM使用，它只是純粹的表象。在特殊情況下，從一個訪問的角度來看，當前螢幕閱讀不支援生成的內容。

範例1：透過before加入三角尖圖片

rrreee

效果圖：

css選擇器可以插入圖片嗎

範例2：

##把before的地方換成after，插入圖片樣式用一下的就行

<!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: &#39;&#39;;
            background: url(&#39;../img/triangle_up.png&#39;) no-repeat top left /32px 16px;/*兼容没测*/
            position: absolute;
            top: -15px;
            z-index: 2;
            width: 32px;
            height: 16px;
        }
    </style>
</head>
<body>
    <p class="p_beforeImg">通过before添加三角尖图片</p>
</body>
</html>

效果圖：

css選擇器可以插入圖片嗎

以上是css選擇器可以插入圖片嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 子类 select dom 选择器 display 伪类伪元素 background

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS中的比較函數：max()、min()、clamp()下一篇：CSS中的比較函數：max()、min()、clamp()

看更多