"background" shorthand 属性中 "background-position" 的问题

Question

我试图使用 background shorthand 属性来指定 background-size、background-repeat 和 background-color，但一直失败.我最终意识到，如果你设置 background-size，你必须设置 background-position，所以我只是将属性设置为 inherit / contain no-repeat #FF7000，据我所知，默认 background-position 应该继承自父级（body，在本例中），因为我没有明确设置 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。

Answer 1

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

Answer 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;
 }

  <div class="image"></div>

"background" shorthand 属性中 "background-position" 的问题

Issues with "background-position" in "background" shorthand property

css

background-image

"background" shorthand 属性 中 "background-position" 的问题

Issues with "background-position" in "background" shorthand property

css

background-image

"background" shorthand 属性中 "background-position" 的问题