3

拡大縮小する固定位置の背景画像が必要で、画像がナビゲーション バーの下にならないように、上余白を 220 ピクセル、右余白を 170 ピクセルにする必要があります。次のコードに近づきましたが、パーセントによって右マージンが異なります。

#container_hu
{
width: 100%;
text-align: left;
background: #fff;
border: 0px solid #000000;
height:100%;
padding-top:260px;
min-width:1100px;
background:url(../images/bg_image.jpg) no-repeat;
background-attachment:fixed;
background-position: 78%  220px;
background-size:25%;
}

助けてくれてありがとう！

4

2 に答える 2

4

CSS3 のbackground-clipプロパティを使用して、許可されたコンテンツ領域内に背景を強制的にクリップすることができます。つまり、DIV にパディングを指定して (ナビゲーション バーなどを覆うため)、background-clipプロパティを指定しcontent-boxてこれを実現できます。以下の CSS の例:

#container_hu {

    /* this forces the bg to be rendered only within allowed content area (CSS3) */
    background-clip: content-box;
    background-image: url("your_image.jpg");
    background-repeat: no-repeat;

    /* this forces the bg to stretch with the container (CSS3) */
    background-size: 100% 100%;

    height: 300px;
    width: 400px;

    /* specify the top/left pixels to cover your nav-bar etc. */
    padding-left: 50px;
    padding-top: 50px;
}
于 2012-06-14T06:16:20.147 に答える
0

したがって、170px の右マージンから開始し、次に説明したパーセンテージから始めます。

私は2つのオプションを検討します：

  1. 本体に基本単位を使用して、すべての寸法、余白、プディングなどのレイアウト全体を ems でやり直します。そうすれば、物事が並ぶ可能性が高くなるかもしれません。(本質的には、%age が機能しないため、ems で開始し、ems でスケールアップすると言っています)

  2. ピクセルから始めてピクセル単位で拡大することもできますが、JavaScript で計算を行い、新しいマージンを onResize に適用する必要があります。

于 2012-06-14T06:17:00.753 に答える