對background: url("~assets/img/common/collect.svg") 0 0/14px 14px 的理解

需求：給收藏數字前面通過::before偽元素添加圖標

 

 

 相關代碼：

.goods-info .collect {
  position: relative;
}
.goods-info .collect::before {
  content: '';
  position: absolute;
  left: -15px;
  top: -1px;
  width: 14px;
  height: 14px;
  background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
}

代碼中出現了  background: url("~assets/img/common/collect.svg") 0 0/14px 14px令人費解，於是通過百度以及在控制台更改數字觀察變化，理解如下：

• 背景縮寫屬性可以在一個聲明中設置所有的背景屬性。可以設置的屬性分別是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image。如果上述值缺少一個，這不要緊，也是可以的。

• 語法：background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

• 
• background: url("~assets/img/common/collect.svg") 0 0/14px 14px 說明：

第一個數字0表示背景顏色：

改為pink后：

         

 

 

 　　　第二個0/14px的含義：

　　　　　0 是background-position的屬性簡寫。background-position 屬性設置背景圖像的起始位置。https://zhidao.baidu.com/question/141723600.html

　　　　　14px 是background-size的屬性簡寫。background-size 屬性規定背景圖像的尺寸。https://www.w3school.com.cn/cssref/pr_background-size.asp

　　　最后14px和前面14px共同構成background-size：（這個14px可省略）

 

 

 以上就是對該句代碼的理解。