web-dev-qa-db-ja.com

影が現れない

Divの1つに影を配置しようとしていますが、表示されません。シャドウを実装しようとしている1つのdivは次のとおりです。

#intro {
    padding: 0px;
    margin: 0px auto;
    width: 100%;
    float:inherit;
    overflow: hidden;
    height: 800px;
    position:inherit;
    background-color: #00b3e1;; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

URLは次のとおりです。 http://rachelchaikof.com/awareness/

cssshadowcss3
22
user1869585

影が見えない理由は、次のdiv（#one）がその直下にあり、影が#oneの下にレンダリングされているためです。 #oneから背景画像を削除すると、影が表示されます。

これを#introのCSSに追加して、影を表示します。

position: relative;
z-index: 10;

他のテキスト領域に影を表示したい場合は、最上位の要素（#intro）の値を最大にして、それらのz-index値も調整する必要があります。

110
Chris Herbert

正しい解決策については、以下のChris Herbertの回答をご覧ください

前の答え：

chrome、Moz、Safariのサポート：

-moz-box-shadow:0 0 8px 0 black;
-webkit-box-shadow:0 0 8px 0 black;
box-shadow:0 0 8px 0 black;

つまり、サポートははるかに複雑です。

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color='#33000000');
5
Justin McDonald

私が今日持っていた別のシナリオ。 divを基準にして位置を設定しても、ボックスシャドウは表示されませんでした。どうやら、このdivの隣にボックスシャドウのあるコンテンツはありませんでした。

コンテンツが追加されると、ボックスの影が現れました。

0
Pavithra Olety