html - DIVの四隅すべてに画像を添付

Question

周りに赤い点線の境界線がある DIV があります。

DIV の HTML:

    <div id="certificate" style="text-align:center;display:none;">
<img src="imgflo_topleft.png" id=img1 />
<img src="imgflo_bottomleft.png" id=img2 />
<img src="imgflo_topright.png" id=img3 />
<img src="imgflo_bottomright.png" id=img4 />

//OTHER texts will go here but it should not interfere with the images
    </div>

CSS:

#certificate {
    width: 900px;
    margin: 0px auto;
    border: 2px dotted red;
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
}

DIV の各コーナーに配置する画像:

結果：

Answer 1

余分な要素を作成することなく、背景画像を使用してこれを行うことができます。

このフィドルを参照してください。

.cert {
  min-width: 212;
  min-height: 166;
  background: 
    url(http://i.stack.imgur.com/ghI7u.png) left -106px top -83px no-repeat, 
    url(http://i.stack.imgur.com/ghI7u.png) right -106px top -83px no-repeat, 
    url(http://i.stack.imgur.com/ghI7u.png) left -106px bottom -83px no-repeat, 
    url(http://i.stack.imgur.com/ghI7u.png) right -106px bottom -83px no-repeat, 
    white;
  padding: 40px;
}

また、ダウンロードを高速化するために 4 つのコーナーの画像を組み合わせることができます。

Answer 2

position: relativeコンテナ div と、 、 、 、およびピクセル値と組み合わせて画像に設定します。つまり、次position: absoluteのようになります。topbottomleftright

#img2 { position: absolute; bottom: 0px; left: 0px; }

絶対配置要素はページ フローから削除されるため、コンテナー div 内の他の要素 (テキスト、他のグラフィック、見出しなど) に干渉しません。

または、コンテナー div が固定 (ピクセル値を設定) サイズである場合は、background-image代わりに 4 つのコーナーのすべての画像に使用して、ページの読み込み時間を節約してください。