图片阴影html,js图片彩色阴影特效插件

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

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

使用方法

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

HTML结构

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

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;

}

}