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不支持）。 Documented here.

Answer 2

这不是background-position的正确语法，如this documentation所示。

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

Answer 3

背景位置：正确353px底部20px;

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

职位选择

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

如果您只指定一个关键字，则另一个值将是“中心”

x% y%

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

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

3 个答案: