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

问题描述

我试图使用 background 速记属性来指定 background-size ， background-repeat 和 background-color，但一直失败.我最终意识到，如果您设置 background-size ，则必须设置 background-position ，所以我只是将属性设置为 inherit/包含不可重复的#FF7000，据我所知，默认的 background-position 应该继承自父对象(在这种情况下为 body )，因为我没有明确设置 body 的 background-position .它仍然没有用.但是，这可行: center/包含不可重复的#FF7000 .为什么显式设置它并允许其继承不起作用?我的猜测是我对 inherit 的工作方式的理解是错误的，但我不确定.

这是相关代码的全部:

  .side_img{宽度:150像素；高度:300像素；背景:居中/不重复#FF7000；}#左边{背景图片:url("images/giraffe_painting.jpg");}#右边{背景图片:url("images/giraffe_painting_reversed.jpg");} 

如果这很重要， id 选择器将引用 div s.

解决方案

如

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.

Here's the entirety of the relevant code:

.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");
}

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

解决方案

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屋！