头像背景模糊效果

例如,我们要实现什么的图片效果,背景模糊和头条图片有关系的那种,可以实现吗?可以的!

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)}

简单吧!