“背景位置"问题在“背景"中速记财产 [英] Issues with "background-position" in "background" shorthand property

问题描述

我试图使用background速记属性来指定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的工作方式的理解是错误的，但我不确定.

I was attempting to use the background shorthand property to specify background-size, background-repeat, and background-color, but kept failing. I eventually realized that you have to set background-position if you set background-size, so I just set the property as inherit / contain no-repeat #FF7000, as to the best of my knowledge, the default background-position should be inherited from the parent (body, in this case), as I have not explicitly set body's background-position. It still didn't work. However, this worked: center / contain no-repeat #FF7000. Why would setting it explicitly work and allowing it to inherit not work? My guess is that my understanding of how inherit works is mistaken, but I'm not sure.

这是相关代码的全部:

.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选择器将引用div s.

Also, in case this matters, the id selectors refer to divs.

推荐答案

如background属性的"nofollow noreferrer>文档，不能单独设置background-size，它应与background-position一起使用. inherit和initial也不是这些属性的有效值.

As stated in the documentation of the background property, background-size cannot be set alone and it should be used with background-position. Also inherit and initial aren't valid values for those properties.

这篇关于“背景位置"问题在“背景"中速记财产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！