如何优化CSS背景图像和背景位置属性

Question

我正在关注前端开发的教程，我刚刚为标题图片编写了这个规则集：

date('Y-m-d H:i:s')

PyCharm告诉我header { background-image: linear-gradient(#00000070, #00000070), url("../img/hero.jpg"); background-position: center; background-size: cover; height: 100vh; } 和background-image属性可以通过将它们转换为简写形式来优化，但它没有提供具体的建议。由于我是CSS的初学者，我无法推断出这个问题，并且w3schools.com没有提供任何简写。我怎么能写这个块来缩短呢？

Answer 1

根据W3C的定义，应该有一个斜线将背景大小与背景位置分隔开，并使用逗号将图像与渐变分开：

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);

Answer 2

试试这个

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