使用 filter: blur 加定位属性制作图片颜色的彩色阴影投影

最新推荐文章于 2024-03-20 15:35:22 发布

GNEPUYIHS

最新推荐文章于 2024-03-20 15:35:22 发布

阅读量541

点赞数

分类专栏：前端技巧文章标签： filter: blur 图片颜色阴影彩色投影

本文链接：https://blog.csdn.net/GNEPUYIHS/article/details/82589149

版权

前端技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果就是这个样纸啦！
这里写图片描述

样式

<style>
    h3{margin-left: 40px;margin-top: 50px;}
    .box{width: 300px;height: 200px;margin: 80px;position: relative;float: left;}
    .box .shadow img,.box .img img{width: 100%;height: 100%;object-fit: cover;}
    .img{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 3;}

    .shadow{position: absolute;z-index: 2;display: none \9;/*在IE9及以下版本浏览器禁止显示*/ -webkit-opacity: 0;}

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .shadow{display: none;/*在IE10 IE11下禁止显示*/}
    }

    .shadow1{/*向外扩展投影方式*/width: 110%;height: 110%;left: -5%;filter: blur(25px)!important;}
    .shadow2{/*向右下偏移投影方式*/width: 100%;height: 100%;top: 15%;right: -15%;bottom: -15%;left: 15%;}
    .shadow3{/*向内收缩投影方式*/width: 90%;height: 90%;top: 18%;left: 5%;}
    .shadow4{/*远距离正下方投影方式*/width: 85%;height: 85%;top: 50%;right: 10%;bottom: -50%;left: 7.5%;opacity: 0.5!important;}

    .filter-blur {/*高斯模糊*/-webkit-filter: blur(18px);-moz-filter: blur(18px);filter: blur(18px);opacity: 0.7;}

</style>

html代码（请自己修改图片路径）

<body>
    <h3>图片颜色投影</h3>
    <div class="box">
        <div class="shadow shadow1 filter-blur"><img src="img/02.jpg"></div>
        <div class="img"><img src="img/02.jpg"></div>
    </div>

    <div class="box">
        <div class="shadow shadow2 filter-blur"><img src="img/04.jpg"></div>
        <div class="img"><img src="img/04.jpg"></div>
    </div>

    <div class="box">
        <div class="shadow shadow3 filter-blur"><img src="img/08.jpg"></div>
        <div class="img"><img src="img/08.jpg"></div>
    </div>

    <div class="box">
        <div class="shadow shadow4 filter-blur"><img src="img/06.jpg"></div>
        <div class="img"><img src="img/06.jpg"></div>
    </div>
</body>

GNEPUYIHS

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
使用 filter: blur 加定位属性制作图片颜色的彩色阴影投影

效果就是这个样纸啦！样式&lt;style&gt; h3{margin-left: 40px;margin-top: 50px;} .box{width: 300px;height: 200px;margin: 80px;position: relative;float: left;} .box .shadow img,.box .img img{width: ...
复制链接

扫一扫