이미지에 직접 상자 그림자 스타일을 적용

Question

나는 패딩/그림자 스타일을 얻기 위해 다음과 같이 코딩 이미지를 가지고 :

<div class="slick-shadow"><img src="/images/image.jpg" alt="image"></div> 

나는 이미지에 직접 클래스 매끄러운 그림자를 적용하는 시도하지만, 그림자 부분을 그냥 패딩이 나타나지 않았습니다. CSS를 변경하여 이미지에서 직접 작업하고 동일한 시각적 효과를 얻을 수있는 방법이 있습니까?

.slick-shadow { 
    position: relative; 
    background: #fff; 
    padding:5px; 
} 
.slick-shadow:before, 
.slick-shadow:after { 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 15px; 
    left: 10px; 
    width: 44%; 
    top: 80%; 
    max-width:300px; 
    background: rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 0 16px 10px rgba(0,0,0, 0.4); 
    -moz-box-shadow: 0 16px 10px rgba(0, 0, 0, 0.4); 
    box-shadow: 0 16px 10px rgba(0, 0, 0, 0.4); 
    -webkit-transform: rotate(-3deg);  
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 
.slick-shadow:after { 
    -webkit-transform: rotate(3deg); 
    -moz-transform: rotate(3deg); 
    -o-transform: rotate(3deg); 
    -ms-transform: rotate(3deg); 
    transform: rotate(3deg); 
    right: 10px; 
    left: auto; 
} 

Answer 1

그냥 수동으로 같은 것을 할 수 div의 모든 이미지를 통해 가서 포장 피하기 위해 찾고 있다면 :

Working Example

을 여기

는 CSS입니다

$(function() { 
    $('img').wrap('<div class="slick-shadow" />'); 
}); 

대부분의 브라우저는 img 태그에서 after 또는 : before를 사용할 수 없습니다.
참조 : https://stackoverflow.com/a/5843078/1947286 자세한 내용은