背景图像上的CSS模糊：悬停但不在文本上

Question

例如： https ://jsfiddle.net/q4871w6L/

 .article-image {
  height: 150px;
  width: 238px;
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}
.article-image:hover {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}
.ar-image {
  position: relative;
  width: 238px;
  height: 150px;
}
.article-image > p {
  display: none;
}
.article-image:hover > p {
  position: absolute;
  top: 40%;
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}

 <div class="ar-image">
  <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image">
    <p>Lire plus</p>
  </div>
</div>

我试图在悬停时模糊背景，但不是图像上的文字。如何在不模糊图像上的文字的情况下模糊背景图像？

感谢

原文由 Pierre Myx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能模糊背景图像，但可以模糊元素或伪元素。

使用图像作为定位伪元素的背景（因此它仍在 CSS 中）。

 .article-image {
  height: 150px;
  width: 238px;
}
.article-image:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url(http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg);
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}
.article-image:hover:before {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}
.ar-image {
  position: relative;
  width: 238px;
  height: 150px;
}
.article-image > p {
  display: none;
}
.article-image:hover > p {
  position: absolute;
  top: 40%;
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}

 <div class="ar-image">
  <div class="article-image">
    <p>Lire plus</p>
  </div>
</div>

或者，对结构进行微小的更改并将文本从图像 div 中拉出，使其不是孩子并且受到模糊的影响。

 .article-image {
  height: 150px;
  width: 238px;
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}
.article-image:hover {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}
.ar-image {
  position: relative;
  width: 238px;
  height: 150px;
}
.article-image + p {
  opacity: 0;
}
.article-image:hover + p {
  position: absolute;
  top: 40%;
  opacity: 1;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}

 <div class="ar-image">
  <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image">
  </div>
  <p>Lire plus</p>
</div>

原文由 Paulie_D 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你想去除边缘的模糊，你需要把洞的东西包起来，给它一个宽度+高度+溢出隐藏

 * {
  transform: translateZ(0);
}
.wrapper{
  width: 238px;
  height: 150px;
  overflow:hidden;
  position:relative;
}
.wrapper .article-image {
  width: 238px;
  height: 150px;
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}

.wrapper:hover .article-image{
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}

.wrapper > p {
  display: none;
  position: absolute;
  top: 40%;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
  pointer-event:none;
}
.wrapper:hover > p {
  display: block;
}

 <div class="wrapper">
  <div class="article-image" style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')">
  </div>
  <p class="caption">Lire plus</p>
</div>

原文由 Kuro Kumo 发布，翻译遵循 CC BY-SA 3.0 许可协议