0

コードの.top_sectionの下部にシャドウを配置しようとしています。しかし、私はそれを機能させることができません。私には2つのセクション（上部と下部）があり、影は.top_sectionの下に行く必要があります

コードは次のとおりです。

CSS：

.top_section {
    background-image: url(../images/background.png);
    background-repeat: no-repeat;
}

#boxShadow{box-shadow: 10px 10pxrgba(0, 0, 0, .4);} 

.bottom_section {
background-image: url(../images/background.png);
}

HTML：

<div class="container-fluid top_section">
<div id="boxShadow">
<section>

    <div class="row-fluid">
        <div class="span4 offset4">
        <br />
            <img src="images/logo.png" width="400" height="400" image alt="image" />
        </div>
    </div>

<div class="row12">
        <h3><p class="text-center">ANIMATOR & DIGITAL ILLUSTRATOR</p></h3>
        <h4><p class="text-center">I'M MARK FROM SINGAPORE, I DESIGN & MAKE THINGS MOVE.   </p></h4>
        <h4><p class="text-center">I AM CURRENTLY FREELANCING AND STUDYING AT ANIMATION MENTOR.</p></h4>
        <br />
        <br />
 </div>

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span1 offset4">
            <a href="#" class="thumbnail">
                <img src="images/MAIL_icon.png" width="50" height="50" image alt="image" />
            </a>
        </li>
        <li class="span1">
        <a href="#" class="thumbnail">
            <img src="images/DRIBBBLE_icon.png" width="50" height="50" image alt="image" />
            </a>
         </li>
         <li class="span1">
        <a href="#" class="thumbnail">
            <img src="images/TWITTER_icon.png" width="50" height="50" image alt="image" />
            </a>
         </li>
         <li class="span1">
        <a href="#" class="thumbnail">
            <img src="images/INSTAGRAM_icon.png" width="50" height="50" image alt="image" />
            </a>
         </li>
    </ul>
</div>

</section>

</div>

</div>

ご協力ありがとうございました。

4

3 に答える 3

0

これを変更してみることができます：http：//jsfiddle.net/KyuH7/

<div id="box_wrapper">
   <div id="box">
   </div>
   <div id="box_shadow">
   </div>
</div>

#box_wrapper{
    width:300px;
    height:300px;
    position:relative;
    z-index:2;
}

#box_wrapper #box{
    width:300px;
    height:300px;
    position:absolute;
    background:#FFF;
    top:0;
    left:0;
    z-index:3;
}

#box_wrapper #box_shadow{
   width:290px;
   height:50px;
   background:#CCC;
   position:absolute;
   bottom:0;
   left:5px;
   z-index:0;
   box-shadow:0px 10px 5px rgba(0,0,0,.1)
}
于 2013-03-16T23:54:57.987 に答える
0

私が見る唯一の問題は、あなたのコードがboxShadowの単なるタイプミスであることです。そうでなければ、このフィドルでうまくいくようです:タイプミス修正フィドル

10px と rgba の間にスペースが必要です。

#boxShadow { box-shadow: 0px 10px rgba(0, 0, 0, .4); }

これはあなたが探しているものですか？右側の影を削除するように編集。

これは、クロスプラットフォーム (および古いブラウザー) のブラウザー固有のプレフィックスを含む、box-shadow の完全なチュートリアルです: CSS3 Box Shadow チュートリアル

于 2013-03-16T01:29:30.507 に答える