css - 将框阴影样式直接应用于图像

Question

我有这样编码的图像以获得填充/阴影样式：

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

我尝试将类 slick-shadow 直接应用于图像，但阴影部分没有出现，只是填充。有没有办法可以更改 CSS 以直接在图像上工作并获得相同的视觉效果？

这是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手动将所有图像包装在 s 中，则可以执行以下操作：

工作示例

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

大多数浏览器不支持在 img 标签上使用 :after 或 :before。
请参阅：https ://stackoverflow.com/a/5843078/1947286了解更多信息。