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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!