Question

我遵循本指南：CSS background Property。

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

我有这个背景CSS：

background-color: grey;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-origin: content-box;

我试图将其转换为一行：

background: grey center / contain no-repeat content-box;

我需要背景图像和灰色作为填充的背景。

我哪里错了？

＆＃13;

div{
    width: 200px;
    height: 400px;
    background: grey center / contain no-repeat content-box;
    padding: 30px;
}

＆＃13;

<div style="background-image: url(https://upload.wikimedia.org/wikipedia/en/5/50/NES_Super_Mario_Bros.png)"></div>

＆＃13;

JSFiddle

Answer 1

我需要背景图像和灰色作为填充的背景。

如果您需要将background-image 和灰色作为填充的背景，那么您应该将background-clip设置为padding-box而不是content-box }。 content-box区域不包括填充或边界区域。

＆＃13;

div {
  width: 200px;
  height: 400px;
  background: grey center / contain no-repeat padding-box;
  padding: 30px;
}

＆＃13;

<div style="background-image: url(https://upload.wikimedia.org/wikipedia/en/5/50/NES_Super_Mario_Bros.png)"></div>

＆＃13;

请注意，我在上面的句子中提到了background-clip而不是background-origin。 background-clip实际上是剪切背景而不是background-origin。如果只提供一个框值，则假定剪辑和原点具有相同的值。

根据W3C Spec

如果存在一个值，则它将'background-origin'和'background-clip'都设置为该值。如果存在两个值，则第一个设置'background-origin'，第二个设置为'background-clip'。

现在图像到达边缘，图像应该填充，颜色不应该是单独的规则而不是一行。^Link

如果您的意思是说background-image是必需的（并且必须仅限于内容区域），而颜色也应用于填充区域，如问题和评论here中所示，代码提供的内容不会按原样运作。

当您使用简写background属性为background-clip分配值（如同问题）时，您只给它一个值，因此相同的设置将适用于这两种颜色和图像。这意味着图像和颜色都将被剪裁到填充框或内容框（如果适用）。

＆＃13;

div {
  width: 200px;
  height: 400px;
  background: grey center / contain no-repeat content-box;
  padding: 30px;
}

＆＃13;

<div style="background-image: url(https://upload.wikimedia.org/wikipedia/en/5/50/NES_Super_Mario_Bros.png)"></div>

＆＃13;

您仍然可以通过使用速记属性来实现您的需求，但您必须使用以下任一选项：

方法1：在同一行中分配图像和颜色，如下面的代码段所示。简写属性在这里工作，因为我们专门为颜色和图像分配剪辑值。

＆＃13;

div {
  width: 200px;
  height: 400px;
  background: url(https://upload.wikimedia.org/wikipedia/en/5/50/NES_Super_Mario_Bros.png) center / contain no-repeat content-box, grey center / contain no-repeat padding-box;
  padding: 30px;
}

＆＃13;

<div></div>

＆＃13;

方法2：为background-origin和background-clip属性分配单独的值，如下面的代码段（也在comment by Karsten Buckstegge中指出）。

这有效是因为两个原因：

背景颜色没有大小，它们会填充剪辑范围内的整个区域。因此，填充区域也可以使用颜色。
背景图片的大小设置为contain，根据规格，这意味着必须缩放图片以适合背景定位区域，这只是{{ 1}}如上所述here。由于background-origin仅background-origin且content-box设置为background-repeat，因此图片不会占用填充区域。

＆＃13;

no-repeat

＆＃13;

div {
  width: 200px;
  height: 400px;
  background: grey center / contain no-repeat content-box padding-box;
  padding: 30px;
}

＆＃13;

请注意，必须在颜色之前指定图像，因为首先指定的图像将成为最顶层。如果在图像之前添加颜色，则颜色将隐藏图像。

Answer 2

这是速记的问题。

如果你只是在最后设置一个值（在这种情况下＆＃39; content-box＆＃39;），它会将background-origin和background-clip设置为该值。因此，您必须在此之后设置背景剪辑才能使其正确。最终代码如下所示：

background: grey center / contain no-repeat content-box border-box;

请参阅W3C background spec。

单线（速记）背景风格？

2 个答案: