CSS– ；使用未模糊文本模糊图像

我有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;
}

---

下面是一个代码片段，它完成了您要查找的功能—当您将鼠标悬停在图像上时使图像模糊，同时显示文本描述

关键是需要在div上使用

：hover

伪类，然后当div悬停时，只模糊图像，并显示描述文本span

.blur{
宽度：350px；
高度：350px；
}
.模糊图像{
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
}
.模糊跨度{
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
}
.blur：悬停img{
-webkit过滤器：模糊（5px）；
}
.模糊跨度{
不透明度：0；
位置：绝对位置；
顶部：30px；
左：30px；
}
.blur:悬停范围{
不透明度：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;
}

你的文字
.集装箱{
宽度：200px；
高度：200px；
位置：相对位置；
} 
.模糊照片{
位置：绝对位置；
宽度：200px；
高度：200px；
}
.文本{
位置：绝对位置；
宽度：200px；
高度：200px；
}

---

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

正如@DA解释的，您需要让父容器参与进来。下面是一个使用示例代码的工作小提琴：

你好，世界

.mem1{
高度：200px；
宽度：200px；
利润率：0px 31px；
显示：内联块；
边界半径：10px；
边框：实心；
边界宽度：薄；
边框颜色：#D6；
背景图片：url（members/giles.png）；
z索引：1；/*已添加*/
位置：相对；/*已添加*/
}
.parent{/*添加了此项*/
位置：相对位置；
高度：200px；
宽度：262px；
}
.parent p{/*已修改*/
文本对齐：居中；
位置：绝对位置；
可见性：隐藏；
顶部：50%；/*已修改*/
页边距顶部：-0.5em；/*已添加*/
宽度：262px；/*已添加*/
z索引：2；/*已添加*/
}
.parent:hover.mem1{/*已修改*/
-webkit过滤器：模糊（2px）；
}
.parent:悬停p{/*已修改*/
颜色：#ffffff；
文本阴影：1px 1px#000000；
-webkit过滤器：模糊（0px）；
能见度：可见；
}

@匿名CSS绝对可以做到这一点。请在此处查看“过滤器模糊”属性：尝试此网站：我们需要查看您的标记，但通常，您需要确保文本不是正在模糊的对象的子对象。我猜你有一个带有背景图像和子文本的div。如果模糊该div，子文本也将模糊。@DA。我上传了我的代码，是的，这就是我想要的did@faze2这就是问题所在。将文本移出DIV。或者，将其放入同级DIV。有很多方法可以处理它。不过，我们需要再次看到标记。我将尝试找到一个200px x 200px的图像粘贴在那里，以更好地说明问题，但它是有效的。

<div class="parent">
    <div class="mem1"></div>
    <p>Hello World!</p>
</div>

.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);
  z-index: 1;/* added */
  position: relative;/* added */
}

.parent {/* added this */
    position: relative;
    height: 200px;
    width: 262px;
}

.parent p {/* modified */
  text-align: center;
  position: absolute;
  visibility: hidden;
  top: 50%;/* modified */
  margin-top: -0.5em;/* added */
  width: 262px;/* added */
  z-index: 2;/* added */
}

.parent:hover .mem1 {/* modified */
  -webkit-filter: blur(2px);
}

.parent:hover p {/* modified */
  color: #ffffff;
  text-shadow: 1px 1px #000000;
  -webkit-filter: blur(0px);
  visibility: visible;
}