99国产欧美久久久精品蜜臀|精品无码久久久久久久久久|亚洲国产日韩欧美一区综合|国产亚洲欧洲综合5388

<track id="jjz3x"></track>

            <menuitem id="jjz3x"><dfn id="jjz3x"><thead id="jjz3x"></thead></dfn></menuitem><bdo id="jjz3x"><optgroup id="jjz3x"></optgroup></bdo><track id="jjz3x"></track>
            <nobr id="jjz3x"><optgroup id="jjz3x"></optgroup></nobr>
          1. 咨詢電話:
            15628812133
            08
            2023/12

            img標簽使用after和before偽元素失效的解決方法

            發布時間:2023-12-08 16:32:39
            發布者:MaiMai
            瀏覽量:
            0

            當使用CSS的::before和::after偽元素時,對于<img>標簽,這些偽元素的使用會失效。這是因為<img>標簽是一個自閉合標簽,它并不包含實際的內容,因此無法直接在其前后添加額外的內容或樣式。

            在實際項目中,有時需要在圖片的前后添加一些裝飾性或說明性的內容,比如標簽、說明文字等。如圖:

            圖片后需要添加裝飾性內容

            然而,對于<img>標簽,這樣的操作是無效的。

            比較常見的解決方法是將<img>標簽放置在一個外部容器內,然后對這個容器使用偽元素來添加內容和樣式。

            html結構

            接著,在CSS中,對外部容器使用偽元素:

            對外部容器使用偽元素

            還有一種做法是偽造 content,給 img 這類標簽添加 content 屬性,輸入一些無意義的文本,讓瀏覽器認為標簽含有實際內容。

            如在 CSS 中添加:

            偽造content

            但這種方法可能會存在瀏覽器兼容問題。建議還是使用外部容器法。

            關鍵詞:
            返回列表

            <track id="jjz3x"></track>

                      <menuitem id="jjz3x"><dfn id="jjz3x"><thead id="jjz3x"></thead></dfn></menuitem><bdo id="jjz3x"><optgroup id="jjz3x"></optgroup></bdo><track id="jjz3x"></track>
                      <nobr id="jjz3x"><optgroup id="jjz3x"></optgroup></nobr>