CSS背景简写属性与background-size不兼容

Question

当我尝试将几行CSS合并为一行时，用于设置背景图片样式的代码如下：

background: url("img/background.jpg") cover no-repeat;

它不起作用；但是，当我将"cover"和"no-repeat"移到它们自己的行中时

background: url("img/background.jpg");
background-size: cover;
background-repeat: no-repeat;

图片工作得很好。对于出现问题的原因，有什么提示或想法吗？我经常注意到像填充和边距这样的问题。

- Anindya Basu

Answer 1

background 简写需要你同时设置 background-position 才能设置 background-size。你可以在 规范 中找到 background 简写的语法，但简而言之，这两个属性的语法是：

<bg-position> [ / <bg-size> ]

这意味着 "background-position"，可选地后跟一个斜杠，然后是 background-size (通常的可选空格规则适用)

如果您不需要将 background-position 更改为其他值，则初始值为 0 0（在两个轴上都为零）：

background: url("img/background.jpg") 0 0 / cover no-repeat;

- BoltClock

---

我刚在Chrome中测试了你的答案，但是没有起作用！消息：无效属性。 - Super Hornet

@Super Hornet：有小提琴吗？ - BoltClock

@Super Hornet：你确定你测试正确了吗？ - BoltClock

对我来说完美地工作了。Bolt，你能解释一下斜杠的作用吗？它只是规范还是有特殊含义？ - Anindya Basu

@Anindya Basu：我认为这是为了区分这两个属性，因为它们每个都可以接受两个数字值，例如 0% 0% / 100% 100%。 - BoltClock

Answer 2

background-size不应该包含在background中，因为浏览器无法识别它。

- Super Hornet

---

那么，background: url("插入网址") no-repeat; background-size: cover; 是最好的方法吗？ - Anindya Basu

@AnindyaBasu 是的，完全正确。 - Super Hornet

@AnindyaBasu：是的，这里有一个很好的速记参考链接 http://www.dustindiaz.com/css-shorthand/ - Harsha Venkataramu

@harsha：那是在2005年发布的。已经过去了9年。现在早已过时了。这不是一个好的链接。 - BoltClock

感谢Hornet的帮助，我选择了Bolt的答案，因为它是一个更短、稍微更好的解决方案。虽然如此，我仍然非常感激你的快速回复。 - Anindya Basu

Answer 3

如果你在长手写方式中使用单个值关键字（例如top、left等），并让未编写的值默认居中，那么在简写方式下这是行不通的。你需要指定两个关键字值。

background: url("image.jpg");
background-position: left;
background-size: cover;

在速记中，您需要同时指定两个值。

background: url("image.jpg") left center / cover;

或者两个都居中...

background: url("image.jpg");
background-position: center;
background-size: cover;

background: url("image.jpg") center center / cover;

- Hastig Zusammenstellen

Answer 4

如果简写声明中的属性之一是bg-size属性，则必须使用/（斜杠）将其与bg-position属性分隔开，例如background:url(smiley.gif) 10px 20px/50px 50px;将导致背景图像位于距左侧10像素，距顶部20像素的位置，并且图像的大小为50像素宽和50像素高。

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

- austinabraham_a

Answer 5

我用这个作为标志

background: url('img/logo.png') center center / contain no-repeat;

它运行得非常好。

- Lunayyko