gpt4 book ai didi

html - 如何只模糊背景而不模糊背景下的 div?

转载 作者:太空宇宙 更新时间:2023-11-04 16:14:12 25 4
gpt4 key购买 nike

<分区>

在 CSS 中使用 filter: blur() 函数时遇到问题。首先,它不会出现,其次,它会模糊整个 DIV。

编辑:现在使用我之前没有包含的图像和其他 CSS 进行编辑。

这是我的 HTML/CSS:

.user-archive {}

.user {
float: left;
width: 100%;
max-width: 326px;
min-height: 120px;
padding-right: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
filter: blur(5px);
}

.user-avatar {
float: left;
width: 90px;
min-height: 90px;
padding-right: 10px;
border-radius: 50%;
margin: 10px 10px 0 15px;
}

.avatar,.featuredpage img,.featuredpost img,.post-image {padding: 4px; background-color: #f7f7f7; border: 1px solid #e6e6e6;}

img.author {
float: left;
margin: 5px 20px 15px 0px;
border-radius: 50%;
}

.avatar, .featuredpage img, .featuredpost img, .post-image {

background-color: none;

border-radius: 50%;
}
<div class="user-archive">
<a href="#">
<div class="user" style="background-image:url(http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg);" >
<div class="user-avatar">
<img alt="#" class="avatar avatar-152 photo avatar-default" height="90" src="http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg">
</div>
</div>
</a>
</div>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com