10

背景画像を正しい座標に基づいて配置したいのですが、背景を適用したい要素があります。

この状況では実際には実用的ではありませんが、コンテナ div を使用して背景を表すこともできます。

現在、次のルールがあります。

.myelem {
  background-image: url("myelem.png");
  background-position: 5% 60%;
  background-repeat: no-repeat;
}

ほとんどの場合、画像のサイズのために機能します。可能であれば、背景の相対位置middleがleft.

4

1 に答える 1

17

css プロパティのbackground-positionは値として受け入れcenterます:

.myelem {
    background-image: url("myelem.png");
    background-position: center center;
    background-repeat: no-repeat;
}

または簡略版：

.myelem {
    background: url("myelem.png") center center no-repeat;
}

更新 1

background-position を中央 (または下または右) のオフセットに設定する簡単な css の方法はありません。

次のSOの質問で提案されているように、実際の画像にパディングを追加し、JavaScriptを使用してページの読み込み後の位置を計算し、要素にマージンを追加できます。

calcまたは、 を使用して正しい位置を計算することもできます。現時点では、calc はすべてのブラウザーでサポートされているわけではありません。

calc を使用すると、次のようなことができます。

.myelem {
    background-image: url("myelem.png");
    background-position: 5% 60%;
    background-position: -webkit-calc(50% - 200px) 60%;
    background-position: calc(50% - 200px) 60%;
    background-repeat: no-repeat;
}

デモ

于 2013-03-18T01:45:38.977 に答える