7

オーバーレイしたい画像が 3 つあります (HTML + CSS では、可能であれば JavaScript を使用したくありません)。

画像1 画像2 画像3

これは私が達成したい結果です: 私の好みの結果
[image4]

これは私が試したことです：

CSS:

.imageContainer {
    position: relative;
}

#image1 {
    position: absolute;
    top: 0;
    z-index: 10;

    border: 1px solid blue; 
}
#image2 {
    position: absolute;
    top: 0;
    z-index: 100;

    border: 1px solid fuchsia; 
}
#image3 {
    position: absolute;
    top: 0;
    z-index: 1000;

    width: 10%;
    height: 10%;

    border: 1px solid green; 
}

HTML:

<div class="imageContainer">
    <img id="image1" src="http://i.stack.imgur.com/Es4OT.png"/>
    <img id="image2" src="http://i.stack.imgur.com/WQSuc.png"/>
    <img id="image3" src="http://i.stack.imgur.com/Xebnp.png"/>
</div>​

image1 : 「メイン」画像(image1 は imageContainer の最大高さと最大幅を設定する必要があります - 上記の HTML を参照) [青い枠線]
image2 :horizontal-align: center;およびtop: 0;image1 を基準とする [ピンク色の枠線]
image3 : 元のサイズから 10%ずつサイズ変更されたhorizontal-align: center;相対値to image1 [緑枠]

エラーが発生しやすい HTML + CSS の結果は次のようになりました。 ここに画像の説明を入力

CSS がどうあるべきかわかりません。[画像 4] のような結果を得るにはどうすればよいですか?

4

2 に答える 2

6

たとえば、1つのdivとより多くの背景で作成できます。

#someDiv 
{
  background: url('topImage.jpg') center,
            url('imageInTheMiddle.jpg') 0px 0px,
            url('bottomImage.jpg') /*some position*/;
}

それを表示する簡単な方法でした。もちろん、私がポジショニング値を配置した場所に、あなたはあなたのものを追加しなければなりません。

アップデート

あなたが後で言う場合、私はあなたがあなたの背景で3つの絶対測位divを使用し、css3transform属性でそれらを操作することができると思います。これにより、要素を使用して回転、スケーリングなどを行うことができます。また、javascriptで操作することもできます。

css3変換に関する詳細情報

于 2012-07-12T05:53:42.637 に答える
2

画像を透明にする

透過性の問題についてコードを再度更新しました IMAGE ROTATION のコードを更新しました分度器 image(image2) の画像回転を適用しました 

<style type="text/css">
    .imageContainer {
        position: relative;
        width:165px;
        height:169px;
    }

    #image1 {
        position: absolute;
        top: 0;
        z-index: 10;
        width:120px;
        height:120px;
        border: 1px solid blue; 
    }
    #image2 {
        position: absolute;
        top: 0;
        z-index: 20;
        border: 1px solid fuchsia;
        opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */


    /*for adding image rotation */
       -webkit-transform: rotate(90deg); /*//For chrome and safari*/
        -moz-transform: rotate(90deg);  /*//For ff*/
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /*// For ie */
    /* End for adding image rotation */



    }
    #image3 {
        position: absolute;
        top: 0;
        z-index: 30;
        width: 40%;
        height: 40%;
        border: 1px solid green; 
        left:70px;
        opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */


    }

    </style>






    <form name="frmabc"  action="" method="post">
<div class="imageContainer">
    <img id="image1" src="Es4OT.png"/>
    <img id="image2" src="WQSuc.png" />
    <img id="image3" src="Xebnp.png" />
</div>
</form>
于 2012-07-12T05:39:52.673 に答える