如何在 CSS 中縮放圖片:before/:after 偽元素？-css教學-PHP中文網

如何在 CSS 中縮放圖片:before/:after 偽元素？

Mary-Kate Olsen

發布： 2024-12-04 09:56:12

原創

168 人瀏覽過

How to Scale Images in CSS :before/:after Pseudo-Elements?

在 CSS 中縮放圖片:before/:after 偽元素

使用偽元素以圖片裝飾連結可增強視覺吸引力。但是，當圖像尺寸與連結文字不對齊時，就需要修改圖像高度。

影像高度縮放的語法

與背景影像不同，偽元素影像可以使用背景大小屬性進行縮放。但是，這需要指定包含區塊的寬度和高度。

修正後的CSS 將為：

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px;
    height: 20px;
    content: "";
}

登入後複製

在此程式碼中：

background-尺寸：10 像素20 像素；將影像縮放至10像素寬度和20 像素高度。
display: inline-block;確保偽元素表現為內聯元素。
width: 10px;高度：20px；定義包含塊的尺寸。
content: "";隱藏偽元素中的所有預設內容。

相容性

請參閱 MDN 相容性表以了解各種瀏覽器的支援詳細資訊。

以上是如何在 CSS 中縮放圖片:before/:after 偽元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！