CSS背景缩写属性不工作与background-size [英] CSS background shorthand property not working with background-size

问题描述

当我尝试将几行CSS合并为一个时，样式的背景图像像这样：

When I try to combine several lines of CSS into one when styling a background image like so:

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

它不工作;

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

图片工作正常。任何提示或想法，什么地方出错了？我经常注意到这个问题，比如填充和边距。

The image works just fine. Any hints or ideas on what's going wrong? I often notice this problem with things like padding and margins as well.

推荐答案

背景简写要求您还设置 background-position 以设置 background-size 。您可以在背景速记的语法rel =nofollow> spec ，但简而言之，这两个属性的语法是

The background shorthand requires that you also set background-position in order to set background-size. You can find the grammar for the background shorthand in the spec, but in a nutshell the syntax for the two properties is

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

这表示 background-position 可选后跟正斜杠，然后 background-size （通常的可选空格规则适用）

which means "background-position, optionally followed by a forward slash then background-size" (the usual optional-whitespace rules apply)

不需要将 background-position 更改为不同的值，初始值为 0 0 （两个轴都为零）：

If you do not need to change background-position to a different value, the initial value is 0 0 (zero on both axes):

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

这篇关于CSS背景缩写属性不工作与background-size的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！