CSS删除一个孩子的模糊滤镜[重复]

Posted 2023-02-09

此问题已经在这里有了答案：

How to apply a CSS filter to a background image（16个答案）

关闭16秒前。

我给父元素一个模糊滤镜，但是我想删除一个孩子中的滤镜，请告诉我我该怎么办？

    <div class="left__card">
     <div class="left__card--head">
      <img src="../images/Rawand.jpg" alt="Img" />
     </div>
     <div class="left__card--body">
      <div class="row">
       <h1 class="Name">Rawand Rebwar</h1>
       <h2 class="stage">2'nd Stage</h2>
      </div>
      <p class="paragraph">
       Im computer science student in university of sulaimany , i developed front end for
       this project..
      </p>
      <a href="#" class="profile">Click To See Profile</a>
     </div>
    </div>

及其CSS代码

`
.left__card:hover 
    -webkit-filter: blur(3px)
    -moz-filter: blur(3px)
    -o-filter: blur(3px)
    filter: blur(3px)

`

然后我想删除课程资料上的模糊内容，请帮助

答案

将您的Card内部放入一个自己的容器，然后将过滤器分配给该容器。链接应放在外面。

<div class="left__card"> <div class="blurry"> <div class="left__card--head"> <img src="../images/Rawand.jpg" alt="Img" /> </div> <div class="left__card--body"> <div class="row"> <h1 class="Name">Rawand Rebwar</h1> <h2 class="stage">2'nd Stage</h2> </div> <p class="paragraph"> Im computer science student in university of sulaimany , i developed front end for this project.. </p> </div> </div> <a href="#" class="profile">Click To See Profile</a> </div>

.left__card:hover .blurry 
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);