你能控制CSS偽元素內影像的高度嗎？

修改 CSS 偽元素中的圖片高度：可能嗎？

更改 CSS 偽元素中包含的圖像的高度(:before/:after) 可能具有挑戰性，但並非不可能。預設情況下，CSS 不直接支援調整影像大小。

要實現所需的縮放，請考慮以下方法：

1.調整Background-Size：

對於:在偽元素之後，調整background-size屬性。但是，請確保使用 width 和 height 屬性指定包含影像的區塊元素的寬度和高度。

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

相容性：

注意瀏覽器使用此方法時的相容性。有關更多信息，請參閱 MDN 上的綜合相容性表。

2.調整來源圖像大小：

或者，在 CSS 中使用原始圖像之前，請考慮在伺服器端將其大小調整為適當的大小。這可確保圖像以所需的尺寸顯示，而不依賴瀏覽器縮放。

3.內嵌 IMG 標籤：

要使用更直接的方法，請合併內嵌 標籤。標籤與 CSS 偽元素並排。這種方法保證影像將以指定的尺寸渲染，但偏離了最小化標記的初始目標。

以上是你能控制CSS偽元素內影像的高度嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！