为什么背景位置不起作用？

Question

我不经常使用背景位置，因此也许我没有正确执行此操作，但是我的CSS规则未生效。

background-position:right 353px bottom 20px;

这是代码：

HTML

<h1> 
    <a href="#">
        <img src="/images/silver-corner-logo.jpg" id="site-title" />
    </a>
</h1>

CSS

h1 {
    width:80%;height:154px;
    min-width:353px;
    margin:0;padding:0;
    text-align:right;
    background-color:#A8A9AD;
    background-image:url("/images/top-left.jpg");
    background-repeat:no-repeat;
    background-position:right 353px bottom 20px;
}
#site-title {
    margin:0;padding:0;
    display:block;
    width:353px;
    float:right;
}

编辑

我想到也许我应该描述一下我要完成的工作。

在我的h1内，我有一个徽标（宽度353）。
根据屏幕尺寸，h1可能会大于353。

在这种情况下，我希望背景图像显示在img的相邻位置（左侧），以便它能很好地淡化为纯背景颜色。

Answer 1

你使用的是什么浏览器？ 仅其中几个支持四个background-position值（Firefox，Chrome和Safari不支持）。 记录在这里。

Answer 2

如本文档所示， 这不是background-position的正确语法。

right和bottom没有数字参数，但独立存在。

Answer 3

background-position： 右353px下20px；

令人困惑，下面显示了如何使用background：position。

位置选项

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

如果您仅指定一个关键字，则另一个值为“ center”

x% y%   

第一个值是水平位置，第二个值是垂直位置。 左上角为0％0％。 右下角是100％100％。 如果仅指定一个值，则另一个值将为50％。 。 默认值为：0％0％