divの終了後の背景イメージ

Question

background-imageをdivの末尾に配置したい場合は、シャドウ効果のためにbottomを入力します。私は古いIEでサポートされていないので、擬似要素を使用していません。だから余分なセマンティックなdivを追加せずに、私はそれを底に置く方法があります。私が達成しようとして&をやっているかの

リンク： http://jsbin.com/ebowom

CSS

.border_block { 
    background: url("http://i53.tinypic.com/161f5af.png") no-repeat scroll center bottom rgba(255, 255, 255, 0.60); 
    border-radius: 10px 10px 10px 10px; 
    height: 344px; 
    margin: 0 auto; 
    padding: 8px; 
    width: 920px; 
    } 

    .main_block { 
    background-color: #fff; 
    height: 100%; 
    } 

HTML

<div class="border_block"> 
<div class="main_block"> 
Hello World 
</div> 
</div> 

Answer 1

あなたが行うことができますいくつかの点：

• 擬似要素（このけれども、非常にパフォーマンスの低下）をレンダリングするために6と7を強制的に使用ie8.js

• をPIE.htcをチェックアウトし、あなたが（とにかく良いアイデア）の代わりに画像をCSSで影を再現できるかどうかを確認

• あなたがjQueryを使用している場合は、おそらくPsuedo Pluginを試してください。ちょっとハッキーです。.beforeと.afterのクラスを持つ<span>タグが追加されていますので、私はそれほどファンではありませんが、パフォーマンスはieX.jsよりも優れています。あなたのいくつかのIE6と7つのユーザーは影の効果なし「苦しむ」してみましょう：

• は弾丸をかむと、余分なラッパーのdiv最も簡単な

• を追加します（jQueryの1.6でテストされ、それはまだ動作しません）。

Answer 2

ここに行く：http://jsbin.com/oyozin

編集を：そしてyoureの内側容器の一部について.. http://jsbin.com/oyozin/2

Answer 3

を不思議に思った場合、私は弾丸をかむ、ウェズリーの第四点に最も同意：であなたのdivをラップ境界を含む別のdiv。わずかなオーバーヘッドときれいなコードで、すべてのブラウザでうまくいくような美しい効果が得られます。

この興味深い疑問をクリックした人経験の少ないために

、それはこのように書きます：

HTMLはdiv要素が含まれています

<div class="border_block"><div> Content here ... </div></div> 

CSSは、次のようになります。

body { text-align: center; background-color: #a5a694;} 

    // div with content and shadow 
    .border_block { 
    background: url("http://i53.tinypic.com/161f5af.png") no-repeat scroll center bottom rgba(255, 255, 255, 0.60); 
    width: 920px; 
    background-position: bottom; 
    background-color: #a5a694; 
    padding-bottom: 12px; 
    margin: 0 auto; 
    } 


    // div for the actual content 
    .border_block div{  
    background-color: #FFF; 
    height: 344px; 
    padding: 8px;  
    border-radius: 10px 10px 10px 10px; 
    border: #CCC 8px solid; 
    } 

（IE8以下ではborder-radiusはサポートされていません）