js图片彩色阴影特效插件

image-shadow.js是一款用于制作图片彩色阴影特效的js插件。它通过CSS3 filter过滤器来生成图片对应颜色的阴影效果。

注意，IE浏览器和Edge浏览器不支持该图片彩色阴影特效。

使用方法

在页面中引入image-shadow.js文件。

<script src="js/image-shadow.js"></script>
                

HTML结构

使用该图片彩色阴影特效的HTML结构：

<div class="container">
    <div class="ishadow">
        <img class="img" data-blur="20" src="imgs/1.jpg">
    </div>
    <div class="ishadow">
        <img class="img" data-blur="20" src="imgs/2.jpg">
    </div>
    <div class="ishadow">
        <img class="img" data-blur="20" src="imgs/3.jpg">
    </div>
</div>
                

CSS样式

插件会自动在页面头部添加下面的CSS代码。

/*--- Container that maintains image and shadow. ---*/
.container-img {
  position: relative;
}

/*--- IMG takes the full size of container-img. ---*/
img {
  max-width: 100%;
}

/*--- Setup the image shadow. ---*/
.img-shadow {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  bottom: -10%;
  left: 5%;
  width: 90%;
  height: 95%;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

/*--- Remove shadow for IE and Edge (does not support blur filter). ---*/
@supports (-ms-ime-align: auto) {
  .img-shadow {
    display: none;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .img-shadow {
    display: none;
  }
}                    
                

该图片彩色阴影特效的js插件的github地址为：https://github.com/tunguskha/Image-shadow