为什么背景位置不工作？

我不经常使用背景位置，所以也许我没有做到这一点，但我的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的相邻（左），以便它很好地淡入纯色背景色。

来源

2011-12-05 Zach Lysobey

你使用什么浏览器？ background-position的四个值仅在其中几个支持（Firefox，Chrome和Safari不支持它）。 Documented here.

来源

2011-12-05 17:37:57

哈哈，我一直在那个页面，并没有看到。傻我。猜测它可以与IE9或Opera ... –

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

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

来源

2011-12-05 17:38:24

嗯，我一直在使用MDN [https://developer.mozilla.org/en/CSS/background-position]作为参考。他们举了一个例子：background-position：right 20px bottom 20px; –

@Zach：阅读该页面上标题为“浏览器兼容性”的部分。 –

background-position：right 353px bottom 20px;

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

Optionsof位置

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％

来源

2011-12-05 17:38:43

为什么背景位置不工作？

回答

相关问题