CSS – 模糊图像和未模糊文本

Question

我有 200px 高和 200px 宽的 div 元素，我用一个人的图像填充每个 div 元素。

将鼠标悬停在图像上时，我希望图像模糊，但同时我希望文本出现在图像上(未模糊)以描述他们是谁。有谁知道如何做到这一点？

到目前为止，这就是我得到的:

这是CSS代码:

.mem1 {
  height: 200px;
  width: 200px;
  margin: 0px 31px;
  display: inline-block;
  border-radius: 10px;
  border: solid;
  border-width: thin;
  border-color: #d6d6d6;
  background-image: url(members/giles.png);
}

.mem1 p {
  text-align: center;
  position: absolute;
  margin: 70px 30px;
  visibility: hidden;
}

.mem1:hover {
  -webkit-filter: blur(2px);
}

.mem1:hover p {
  text-align: center;
  position: absolute;
  margin: 70px 30px;
  color: #ffffff;
  text-shadow: 1px 1px #000000;
  -webkit-filter: blur(0px);
  visibility: visible;
}

Answer 1

听起来文本是您要模糊处理的元素的子元素。你不能那样做。你需要做这样的事情:

<div class="container">
    <div class="blurredPhoto"></div>
    <div class="text">Your Text</div>
</div>

.container {
    width: 200px;
    height: 200px;
    position: relative;
} 

.blurredPhoto {
    position: absolute;
    width: 200px;
    height: 200px;
}

.text {
    position: absolute;
    width: 200px;
    height: 200px;
}

然后仅将模糊逻辑应用于 .blurredPhoto 对象。