背景图像上的Css模糊：悬停但不在文本上 [英] Css blur on background image :hover but not on text

问题描述

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

.article-image {height：150px; width：238px; -webkit-filter：灰度（0）模糊（0）;过滤器：灰度（0）模糊（0）; transition：.4s ease-in-out;}。article-image：hover {-webkit-filter：greyscale（100％）blur（2px）;过滤器：灰度（100％）模糊（2px）;过渡：.4s缓入;}。ar-image {position：relative; width：238px; height：150px;}。article-image> p {display：none;}。article-image：hover> p {position：absolute;顶部：40％;显示：块;颜色：#ffffff; font-size：16px; font-weight：bold;宽度：100％;身高：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-图像> < p> Lire plus< / p> < / div>< / div>

试图在悬停时模糊背景，而不是图像上的文字。
如何模糊背景图片而不会模糊图片上的文字？

谢谢

解决方案

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

使用图像作为背景所以它仍然在CSS中）定位的伪元素。

。 article-image {height：150px; width：238px;}。article-image：before {content：'';位置：绝对;身高：100％;宽度：100％; top：0;左：0; background-image：url（http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg）; -webkit-filter：灰度（0）模糊（0）;过滤器：灰度（0）模糊（0）;过渡：.4s缓入;}。article-image：hover：before {-webkit-filter：grayscale（100％）blur（2px）;过滤器：灰度（100％）模糊（2px）;过渡：.4s缓入;}。ar-image {position：relative; width：238px; height：150px;}。article-image> p {display：none;}。article-image：hover> p {position：absolute;顶部：40％;显示：块;颜色：#ffffff; font-size：16px; font-weight：bold; z-index：9999999;宽度：100％;身高：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：灰度（0）模糊（0）;过滤器：灰度（0）模糊（0）; transition：.4s ease-in-out;}。article-image：hover {-webkit-filter：greyscale（100％）blur（2px）;过滤器：灰度（100％）模糊（2px）;过渡：.4s缓入;}。ar-image {position：relative; width：238px; article-image + p {opacity：0;}。article-image：hover + p {position：absolute; height：150px;}。顶部：40％;不透明度：1;颜色：#ffffff; font-size：16px; font-weight：bold; z-index：9999999;宽度：100％;身高：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-图像> < / DIV> < p> Lire plus< / p>< / div>

Ex : 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>

I'm trying to blur the background when hovering but not the text on the image. How can I blur the background image without blurring the text on the image ?

Thank

解决方案

You can't blur a background image but you can blur elements or pseudo-elements.

Use the image as a background (so it's still in the CSS) of a positioned pseudo-element.

.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>

Alternatively, make a minor change to the structure and pull the text out of the image div so it's not a child and subject to the blur.

.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>

这篇关于背景图像上的Css模糊：悬停但不在文本上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！