css偽元素——content設置圖片時無法設置大小的解決 （background-size， background）

偽元素的content支持直接設置圖片，但此時偽元素的width和height無法控制圖片大小。

.item::before {
  content: url(~assets/img.png);
  display: block;
  display:block;
  width: 14px;
  height: 14px;
  object-fit: fill;
}

雖然設置了object-fit: fill 讓圖片“填充”整個容器。但也不能設置圖片尺寸。

解決方法： 在偽元素的background中設置圖片，設置background-size:cover來控制圖片大小

.item::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background:url('img.png')
  background-size:cover;
}

background-size: length|percentage|cover|contain;

值	描述
length	設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為 auto(自動)
percentage	將計算相對於背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)"
cover	此時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小。
contain	此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。