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;
}
}