html - CSSで画像を重ねる方法（クロスブラウザ）

Question

最善の解決策は間違いなく複数の背景画像を使用することです.残念ながらIE9

<a style="background: url('image1.png');" href="page.php"><img src="image2.png"/></a>

残念ながら、正しく動作しません。image2.png の左下に 2 つの画像とおそらく image1.png の位置を重ねるにはどうすればよいですか?

Answer 1

はい、できます。

-->を相対にposition設定します<a>

--><a>として表示inline-block

--> を明示的に指定し、のサイズを !background-sizeのサイズに設定します。重要 ！<a>background-image

-->およびに絶対位置<img>を指定するようになりました。要素の寸法を指定することを忘れないでください。重要 ！bottom: 0pxleft: 0px<img>

ここに典型的なHTMLとCSSがあります（サンプル画像を使用しました）-> JSfiddle View

HTML

<a id="id1" href="page.php">
    <img id="id2" src="http://www.wiljoaskesmontage.nl/rw_common/images/logo_small.jpg"/>
</a>

CSS

#id1
{
    background-image: url('http://upload.wikimedia.org/wikipedia/en/2/26/Ayyavazh_logo_small.PNG');
    background-repeat: no-repeat;
    background-position: left-bottom;
    background-size: 100px 100px;
    height:100px;
    width: 100px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

#id2
{
    width:30px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    overflow: hidden;
}

edit :デフォルトbackground-imageでは、バックグラウンドと<img>フォアグラウンドになりz-indexます。表示順序を指定するために使用します。最も高い要素がz-index最初に表示されます。