一般用在图片上呈现一种更好看的效果
filter: blur(10px);
在元素的属性设置样式后,图片会发生变化,所以要用到两张一样的图片
我写的比较省事,你可以自己随意改变图片位置
style
#box {
position: relative;
float: left;
width: 1000px;
height: 500px;
}
.img_wrap{
width: 1000px;
}
.box_items {
position: absolute;
right: 0;
top: 0;
width: 500px;
height: 500px;
overflow: hidden;
filter: blur(10px);
}
img{
width: 1000px;
height: 500px;
position: absolute;
right: 0;
top: 0;
}
body
<div id="box">
<img class="img_wrap" src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/6609c93d70cf3bc73bb8e2f9d300baa1cd112a6e.jpg"
alt="">
<div class="box_items">
<img class="img_box" src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/6609c93d70cf3bc73bb8e2f9d300baa1cd112a6e.jpg"
alt="">
</div>
</div>