Thêm hộp thoại chèn bóng CSS vào phần tử cha ở phía trên cùng của hình ảnh con

Question

Tôi đang cố gắng thêm bóng cho đối tượng mẹ nơi phần tử con <img> được đặt bên trong nó. Tôi wan bóng inset để chồng lên hình ảnh.

HTML code của tôi là:

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

và 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); 
} 

Cái bóng không xuất hiện cho tôi. Tôi đã làm gì sai?

Answer 1

Sự cố là hình ảnh được hiển thị trên đầu hộp bóng gắn sẵn.

Có 2 cách có thể tôi có thể nghĩ đến việc này, một cách sử dụng độ mờ đục trên <img> để đẩy nó phía sau bóng và cách thứ hai để định vị bóng nội bộ trên đầu hình ảnh. Tôi thích cách tiếp cận thứ hai vì độ mờ đục đầy đủ của hình ảnh có thể được giữ lại.

Lưu ý: Tôi đã tạo đường viền lớn và màu đỏ để trình diễn.

Solution 1 demo

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; 
} 

Solution 2 demo

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: ""; 
}