如何優化CSS背景圖片和背景-position屬性

我下面的前端開發的教程，我只是寫了這個規則集的標題圖片：如何優化CSS背景圖片和背景-position屬性

header { 
    background-image: linear-gradient(#00000070, #00000070), url("../img/hero.jpg"); 
    background-position: center; 
    background-size: cover; 
    height: 100vh; 
}

PyCharm告訴我background-image和background-position屬性可以通過將它們轉換爲速記形式進行優化，但它並未提供關於如何的具體建議。由於我是CSS的初學者，我無法推斷出問題，而w3schools.com並沒有提供任何簡寫。我還可以寫這個塊來縮短它嗎？

來源

2017-07-25 Stobber

正如W3C定義應該有分離背景位置的backgound-size和一逗號將圖像從您的梯度分離斜線：

background: 
    url("../img/hero.jpg")    /* image */ 
    center/cover,      /* position/size */ 
    linear-gradient(red, green)   /* gradient */ 
;

在一行中沒有評論：

background: url("../img/hero.jpg") center/cover, linear-gradient(red, green);

來源

2017-07-25 19:58:17 emjay

這樣做，除了你在'url'屬性後面缺少一個逗號。以下是擺脫PyCharm警告的工作單線程：'url（「../ img/hero.jpg」），中心/封面，線性漸變（紅色，綠色）;'編輯您的回覆，我將標記它是正確答案。 – Stobber

@Stobber不需要逗號，正如您在示例15中爲段落元素所示：https://www.w3.org/TR/css3-background/#the-background – emjay

嗯。 PyCharm 2017.1.4不允許沒有它的聲明。 – Stobber

嘗試此

header { 
background: linear-gradient(#00000070, #00000070), url("../img/hero.jpg"), center, cover}

來源

2017-07-25 19:09:48

雖然我不確定線性漸變。 –

背景屬性不使用逗號分隔位置等屬性，嘗試刪除這些：'background：linear-gradient（＃00000070，＃00000070）url（「../ img/hero.jpg」）中心封面 –

如何優化CSS背景圖片和背景-position屬性

回答

相關問題