0

私は background-position をあまり使用しないので、これを正しく行っていない可能性がありますが、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

どのブラウザを使用していますか? の 4 つの値background-positionは、そのうちのいくつかでのみサポートされています (Firefox、Chrome、および Safari ではサポートされていません)。ここに文書化されています。

于 2011-12-05T17:37:57.270 に答える
2

このドキュメントbackground-positionで示されているように、これは の適切な構文ではありません。

right数値引数はありbottomませんが、スタンドアロンです。

于 2011-12-05T17:38:24.610 に答える
0

background-position:右 353px 下 20px;

ややこしいので、以下に background:position の使い方を示します。

オプションの位置

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

キーワードを 1 つだけ指定すると、もう 1 つの値は「center」になります。

x% y%

最初の値は水平位置で、2 番目の値は垂直位置です。左上隅は 0% 0% です。右下隅は 100% 100% です。1 つの値のみを指定すると、もう 1 つの値は 50% になります。. デフォルト値: 0% 0%

于 2011-12-05T17:38:43.183 に答える