图片/图形
图片彩色阴影特效插件
PetitQ
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;
}}
Github 地址：https://github.com/tunguskha/Image-shadow
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
