CSS - 使用未模糊文本模糊图像

Question

我有div个200px高和200px宽的元素，我在每个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对象。

Answer 2

这是一个代码片段，它可以满足您的需求 - 当鼠标悬停在图像上时会模糊图像，同时显示文字说明。

关键是你需要在div上使用:hover伪类，然后当div悬停时，你只模糊图像，并显示描述文字跨度。

＆＃13;

＆＃13;

.blur {
  width: 350px;
  height: 350px;
}

.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.blur span {
    -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.blur:hover img {
  -webkit-filter: blur(5px);
}

.blur span {
    opacity: 0;
    position: absolute;
    top: 30px;
    left: 30px;
}

.blur:hover span {
    opacity: 1;
}

＆＃13;

<div class="blur pic">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350">
  <span>This is a photo of something.</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

正如@DA解释的那样，你需要让父容器参与其中。这是使用示例代码的工作小提琴：https://jsfiddle.net/m25gkqkL/1/

#include <assert.h>
#include <stdlib.h>

static char int2char(int i) { return i; }

int
main(int argc, char **argv)
{
  for (int n = 1; n < argc && n < 127; n++) {
    char c = -n;
    int i = (atoi(argv[n]) << 8) ^ -n;
    assert(c == int2char(i));
  }
  return 0;
}