0

作業中の Web サイトの背景に 2 つの画像があります。15 インチの画面では、これらの位置はコンテンツ コンテナーのすぐ後ろと右/左にきれいに見えます。しかし、大きなワイドスクリーン (または他の私よりもはるかに大きな画面サイズ) それらは最終的にコンテンツ コンテナーから離れてしまい、独立しているように見えます。

これらはパーセンテージ ベースですが、私の画面の左/右から 25% は、ワイドスクリーンを使用している人とは異なります。とにかく同じ位置にいる必要があります。中心から X% の方が似ているかもしれません。適切なオプションを知っている人はいますか？画像が現在使用しているもののコードをいくつか添付しました。

http://bit.ly/1aNgkfa

ホームページのハーブの背景画像のCSS（左上）

.herb-bg-img {
margin-left: -15%;
margin-top: 5%;
position: absolute;
float: left;
z-index: -2;
}

ホームページのピーマンの背景画像のCSS（右下）

.peppers-bg-img-index {
float: right;
position: absolute;
margin-top: -30%;
margin-left: 880px;
z-index: -2;
}
4

2 に答える 2

1

leftプロパティとマイナスを使用してmargin-left、必要に応じて配置します。

.herb-bg-img {
    position: absolute;
    left: 50%;
    margin-left: -600px; // Change as needed
    margin-top: 5%;
    z-index: -2;
}

右側の画像と同じですが、margin-left代わりにポジティブのみを使用してください。

これは、画面の幅に関係なく同じままにする必要があります。

于 2013-11-10T20:56:19.707 に答える
0

この 2 つの画像を完全に配置しています。ただし、を使用して、親要素に対して絶対に配置する必要がありますposition: relative。現在、それらはページに関連しているため、引き続き問題が発生します。

要素に追加position: relativeすることをお勧めします。.container

于 2013-11-10T21:38:21.070 に答える