为图片边缘添加光效

最新推荐文章于 2024-12-04 14:02:25 发布

原创最新推荐文章于 2024-12-04 14:02:25 发布 · 866 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用CSS实现的头像模糊背景效果，通过绝对定位和滤镜属性来达到美观的视觉展示效果。文章展示了如何利用CSS的blur滤镜为头像图片创建一个柔和的背景副本。

.headBox{
    position: relative;
}
.headImg{
    width: 100px;
    border-radius: 10px;
    position: absolute;
    z-index: 99;
}
.headImgBg{
    z-index: -99;
    /*position: absolute;*/
    width: 100px;
    border-radius: 10px;
    -webkit-filter: blur(2px); /* Chrome, Safari, Opera */
    filter: blur(2px);
}

<a class="headBox" href="javascript:" >
    <img class="headImg" src="dgimages/dige1.png" alt="ZhangDi(张迪)">
    <img class="headImgBg" src="dgimages/dige1.png" >
</a>