![](https://i-blog.csdnimg.cn/blog_migrate/64d50257f6e7658bc52bf2f0d97a3036.png)
例如,我们要实现什么的图片效果,背景模糊和头条图片有关系的那种,可以实现吗?可以的!
html:
<div class="avatar blur"></div>
css:
.avatar{width: 100px;height: 100px;border-radius: 50%;background: #0057C4;background: url(../img/01.jpg) no-repeat;background-size: cover;position: relative;}
.blur:before{content: "";display: block;background: inherit;filter: blur(10px);position: absolute;width: 110%;height: 110%;top: 10px;left: 0px;z-index: -1;opacity: 0.4;transform-origin: 0 0;border-radius: inherit;transform: scale(1, 1)}
简单吧!