Question

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

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

我尝试将类光滑阴影直接应用于图像，但阴影部分没有显示，只是填充。有没有办法可以改变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手动包装所有图片，可以执行以下操作：

Working Example

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

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

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

1 个答案: