divの背景を半分に塗りつぶす方法

Question

私はこのUIデザインとその本当に美しいものを見ました。私はこのデザインを私のWebアプリケーションで使用したいと考えています。

Iは固定ヘッダ、固定フッタを有します。真ん中には、画面の幅の95％の主要コンテンツがあります。

デモ：codepen.io

<header> 
    <div id="header_wrapper"> 
    <nav> 
     <a href="#"> <i class="fa fa-bars" aria-hidden="true"> </i> </a> 
    </nav> 
    </div> 
</header> 

<div id="main_content"> 
    <div id="profile_wrapper"> 
    <div id="profile_image" style="background-image:url(http://s3.amazonaws.com/37assets/svn/765-default-avatar.png)"></div> 
    <div id="profile_username">Usernamae</div> 
    </div> 
    <div id="some_content"> 
    <div class="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae suscipit quaerat dolore assumenda voluptate. Molestias accusamus fugiat quam illo impedit aliquid eligendi assumenda molestiae, quis, ratione, fugit dicta dolore praesentium.</p> 
    </div> 
</div> 

私は何を得ることはありませんことですが、私はそのプロファイル画像のdivのプロファイル-画像の50％の高さを有し、100％を持つことになり、バックグラウンドを持つことができる方法私のメインコンテンツは画面幅の95％を占めているので、画面の幅は？

Answer 1

方法は唯一ではなく、::after疑似要素を親に追加することで、別の背景が追加されます。例：

#profile_wrapper { 
    position: relative; 
} 

#profile_wrapper:after { 
    content: ""; 

    position: absolute; 
    left: 0; 
    top: 50%; 
    height: 50%; 
    right: 0; 

    background: white; 
    z-index: 0; 
} 

この疑似要素は、親の下半分に白色を適用します。プロフィール画像そのもののような他の子供には、上にとどまるためには、正の値z-indexを与えなければならないことに注意してください。

シングルコロン構文（:after）を使用している限り、擬似要素は複数の背景画像よりもslightlywiderのサポートを受けています。基本的にIE8だけです。 IE8について心配する必要がある場合は...

Here is a version of thisペンに適用されます。