0

私は2つの画像を持っています.1つの画像は寸法1800 X 1140で、他のフェード画像は寸法1 X 1140です。これらの2つの画像を組み合わせて、最初の画像が半分になり、2番目の画像がフェードするグラデーションのようになるようにする必要があります最初の画像。次のようにdivを実装しました。

<div style="background:url('first-img.png') no-repeat fixed top center transparent;">
   <div style-"background:url('second-img.png') repeat fixed bottom center transparent;">

   </div>
</div>
4

2 に答える 2

0

ちょっと今、このように相対位置と絶対位置を定義できます

Define your parent postion relative and child define absolute

CSS

    .parent{
position:relative;
    width:500px;
    height:200px;
    border:solid 1px green;
    background:url('first-img.png') no-repeat fixed top center transparent;
}




.child{
position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:solid 2px red;
    background:url('second-img.png') repeat fixed bottom center transparent;
}

HTML

 <div class="parent">
       <div class="child">
    -------
       </div>
    </div>

デザインに合わせて幅や高さを変えたり…

于 2012-04-26T08:07:19.340 に答える
0

あなたが使用した方法は、背景画像の垂直位置と水平位置を正しく反転することです..正しい順序は、最初に水平方向、2番目に垂直方向です。コードは次のようになります

<div style="background:url('first-img.png') no-repeat fixed center top transparent;">
   <div style-"background:url('second-img.png') repeat fixed center top transparent;">

   </div>
</div>

また、divの正確な幅と高さを追加します

于 2012-04-26T06:49:54.400 に答える