CSSを使用したコーナーイメージ

私は困惑している比較的シンプルなデザインです。それは、左上、右と左下、右隅に張り付いている必要がある4つの大きな画像を持っています。画像はかなり大きく、コンテンツコンテナが重なり合っています。このような少し何か：CSSを使用したコーナーイメージ

Structure http://www.kalleload.net/uploads/nizyjc/zxyagpfrmjqe.png

私の問題は私の実装では、（私は尊敬し始めていた）IE8を除くすべての主要なブラウザでは正常に動作していることです。私はこれを行うより良い方法はありますか？

私は、現時点では次のマークアップを使用しています：

<div class="corner-top"> 
    <div><img src="./images/top-left-corner.png" /></div> 
</div> 

<div class="corner-bottom"> 
    <img src="./images/bottom-left-corner.png" /> 
</div> 

<div id="container"> 
.... 
</div> 


#container { 
    margin: 60px auto; 
    width: 488px; 
} 

.corner-top { 
    background: url('./images/top-right-corner.png') top right no-repeat; 
    height: 356px; 
    min-width: 868px; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -20; 
} 

.corner-top div { 
    min-width: 868px; 
} 

.corner-bottom { 
    background: url('./images/bottom-right-corner.png') bottom right no-repeat; 
    bottom: 0; 
    height: 325px; 
    min-width: 868px; 
    overflow: hidden; 
    position: absolute; 
    width: 100%; 
    z-index: -20; 
} 

.corner-bottom div { 
    min-width: 868px; 
}

出典

2009-06-18 Ross

あなたはIE8はしたくない私たちの人のために、間違って何をするかについて概説でしhttp://quirksmode.org – Benjol

ために良い質問であるかもしれません将来これを発見しますか？ – ijw

角丸（基本的には同じ）には多くのアプローチがあります。

<div id="container" class="topleft"> 
    <div class="topright"> 
    <div class="bottomleft"> 
     <div class="bottomright"> 
     <!-- content --> 
     </div> 
    </div> 
    </div> 
</div>

もう一つの利点は、あなたが<img>タグを必要としないということです：私は、最も快適な1は、お互いに4つのdivを持っていると思います。

出典

2009-06-18 08:50:19 Kobi

これは私が最初に使った方法でしたが、解像度の高いモニターでは、底部のコーナーを下にする方法を見つけることができませんでした。 – Ross

私は内側のdivはメインdivの100％を埋めるべきだと思います。そのdivを配置するのは簡単なはずです。しかし、まあ、あなたはすでにそれを試したことがあります。 – Kobi

IE8をIE7互換モードに強制しようとする可能性があります。

スティックで

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

あなた<head>

出典

2009-06-18 08:59:28 Loofer

Zoooombie zoooomibe、あなたの頭の頭の頭の頭部に。 *もっと歌う* –

CSSを使用したコーナーイメージ

答えて

関連する問題