10

<img>子要素が内部に配置されている親オブジェクトに影を追加しようとしています。はめ込み影が画像に重なるようにします。

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

<section class="highlights">
    <img src="images/hero.jpg" alt="" />
</section><!-- End section.highlights -->

およびCSS:

.highlights {
    height: 360px;
    padding: 0;
    position: relative;
    overflow: hidden;
    opacity: 0.9;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 

    z-index:1;
}
.highlights img {
    height: auto;
    width: 100%;
    margin: 0 auto; 
    display: block;
    position: relative;
}

.highlights {
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
    box-shadow:  inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

影は私には現れません。私は何を間違えましたか？

4

1 に答える 1

21

問題は、画像が挿入されたボックス シャドウの上にレンダリングされることです。

これを行うには2つの方法が考えられます。1つは不透明度を使用し<img>て影の後ろに押し込み、もう1つは挿入された影を画像の上に配置する方法です。画像の完全な不透明度を保持できるため、2 番目のアプローチを好みます。

注: デモンストレーション用に境界線を大きく赤くしました。

ソリューション 1 のデモ

HTML

<section class="highlights">
    <img src="http://lorempixel.com/500/360/city/1/" alt=""/>
</section>

CSS

.highlights {
    height: 360px;
    padding: 0;
    position: relative;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}
.highlights img {
    height: auto;
    width: 100%;
    margin: 0 auto; 
    display: block;
    opacity: .9;
}
.highlights {
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 25px 25px red;
}

ソリューション 2 のデモ

CSS

.highlights {
    height: 360px;
    padding: 0;
    position: relative;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}
.highlights img {
    height: auto;
    width: 100%;
    margin: 0 auto; 
    display: block;
}
.highlights::before {
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 25px 25px red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
}
于 2013-08-02T09:11:05.483 に答える