如何設置css-content-image的大小？

Question

.upper-menu .search-form::after { 
    content: url('../images/search.png'); 
    position: absolute; 
    height: 10px; 
    top: 5px; 
    right: 22px; 
} 

我有看起來像這樣的僞元素。我想通過將圖像縮小50％來改變圖像的大小，以便它可以在高分辨率屏幕上工作。我怎樣才能做到這一點？

Answer 1

此外，您可以將內容設置爲空字符串並使用背景圖像。或者只是...

.upper-menu .search-form::after { 
    content: ' '; 
    display: inline-block; 
    position: absolute; 
    background: #bada55 url("img_2x.png") no-repeat; 
    background-size: contain; 
    height: 10px; 
    width: 10px; 
    top: 5px; 
    right: 22px; 
} 

Answer 2

您只需將寬度和高度屬性設置爲50％即可。這將根據瀏覽器窗口進行縮放。

祝您好運！