Image-shadow.js是一个用于为图像创建色调效果的js插件。它使用CSS3滤镜过滤器生成图像对应颜色的阴影效果。
注意，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;
  }
}

源码来源：https://github.com/tunguskha/Image-shadow

在线预览 网盘下载