在一行中声明所有CSS背景属性 - 尤其是背景大小

Question

所以这是我的代码:

background: url(images/my-image.png) no-repeat center center / cover;

这适用于Chrome和Firefox,但出于某种原因却不适用于Safari？

我曾经background-size在它自己的行上声明我,但据我所知,应该可以使用正斜杠在一行中声明所有属性？

任何帮助将非常感激.谢谢.

Answer 1

因为一线短手代码似乎对于safari浏览器的含义而言是未知的:

background: url(images/my-image.png) no-repeat center center / cover;

我之前遇到过同样的问题.以下适用于所有浏览器:

background: url(images/my-image.png) no-repeat;
background-position: center;
background-size: cover;/*now this is known for the safari*/

Answer 2

背景属性具有以下属性。

• url("image path")
• bg-color例如透明或任何颜色
• bg-img-repeat例如repeat或no=repeat
• bg-image-postion垂直和水平例如center center
• bg-img-size例如cover, contain, 100%, 800px, 或200px 100px(宽度和高度) 等

我们会这样写

background: url("images/my-image.png") transparent no-repeat bottom center  / cover;
background-size: cover; /*for safari we can add this sperately*/