設置圖片url內容的僞元素的寬度

Question

我有一個應該可打印的頁面。問題在於頁面包含一些帶有background-image的元素（並且我在打印時看不到圖像），所以我嘗試爲打印機創建樣式表，並使用一些僞元素來幫助我顯示圖像，看起來像：

.pbar-fill { 
    background: none !important; 
} 
.pbar-fill::before { 
    content: url("/images/bg-progress-bar-big01.gif") !important; 
    position: absolute !important; 
    z-index: 1003 !important; 
    width: 23px !important; 
} 

它不好，因爲圖像始終獲得其全寬（220px）。

Answer 1

僞元素只是一個包含生成內容的框。所以你不能調整裏面的圖像。

這個線程涵蓋了所有的選項幾乎完全是
Can I change the height of an image in CSS :before/:after pseudo-elements?

最好的選擇似乎是縮放圖像以什麼都適合。但這可能是在各個地方實施的拙劣手段。

.pbar-fill::before { 
    content: url('image.jpg'); 
    transform: scale(.5); 
}