“背景”速记属性中的“背景位置”问题答案

【问题标题】：Issues with "background-position" in "background" shorthand property“背景”速记属性中的“背景位置”问题
【发布时间】：2018-11-03 01:07:58
【问题描述】：

我试图使用background 速记属性来指定background-size、background-repeat 和background-color，但一直失败。我最终意识到，如果你设置background-size，你必须设置background-position，所以我只是将属性设置为inherit / contain no-repeat #FF7000，据我所知，默认的background-position应该继承自父级（@ 987654330@，在这种情况下），因为我没有明确设置body 的background-position。它仍然没有工作。但是，这有效：center / contain no-repeat #FF7000。为什么显式设置它并允许它继承不起作用？我的猜测是我对inherit 工作原理的理解是错误的，但我不确定。

以下是相关代码的全部内容：

.side_img
{
    width: 150px;
    height: 300px;
    background: center / contain no-repeat #FF7000;
}

#left_side
{
    background-image: url("images/giraffe_painting.jpg");
}

#right_side
{
    background-image: url("images/giraffe_painting_reversed.jpg");
}

另外，如果这很重要，id 选择器指的是divs。

【问题讨论】：

它们是为各个 div 单独指定的。根据我的阅读，background-image 可以从background 中排除。我错了吗？
我发布的代码有效。我想知道为什么我不能用“继承”替换“中心”。如果你说的是真的，我的代码根本不应该工作。
好吧，这是关于别的事情......但我猜你不能继承属性的一部分
勾选这个developer.mozilla.org/en-US/docs/Web/CSS/background，你会看到正式的语法[大蓝框]，你需要遵循这个语法并且不允许继承
大概就是这样。当inherit只能用作完整值时，我将其用作子值。

标签： css background-image

【解决方案1】：

如background 属性的documentation 中所述，background-size 不能单独设置，应与background-position 一起使用。 inherit 和 initial 也不是这些属性的有效值。

【讨论】：

Temani Afif 我问这个问题是否有误，您只是将其标记为重复！那根本没有帮助！因为我可以自己写，但这是在引导程序中，所以会更专业地说出什么是错的，而不是指向我。因为我仍然不知道它到底有什么问题。 stackoverflow.com/questions/60930928/…

【解决方案2】：

居中和响应背景图像的最佳方法是使用以下 CSS

.image {
    height: 0;
    border-radius: 1em;
    padding-top: 70%;
    background: url('https://besthqwallpapers.com/Uploads/14-2-2018/40643/thumb2-american-curl-small-gray-kitten-4k-breeds-of-cats-small-cat.jpg') no-repeat center center/cover;
 }

  &lt;div class="image"&gt;&lt;/div&gt;

【讨论】：