0

我不经常使用背景位置，所以也许我没有正确执行此操作，但我的 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 相邻（左侧）的位置，以便它很好地淡入纯色背景色。

4

3 回答 3

2

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

于 2011-12-05T17:37:57.270 回答
2

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

right并且bottom没有数字参数，而是独立的。

于 2011-12-05T17:38:24.610 回答
0

背景位置：右 353px 下 20px；

令人困惑，下面展示了如何使用背景：位置。

职位选择

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%

于 2011-12-05T17:38:43.183 回答