Css 模糊背景图片：悬停但不悬停在文本上

Question

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

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

谢谢

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>

Answer 2

.article-image{
    height: 150px;
    width: 238px;
    -webkit-filter: grayscale(0) blur(0);
    filter: grayscale(0) blur(0);
    transition: .4s ease-in-out;
}

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

.ar-image{
    position: relative;
    width: 238px;
    height: 150px;
}

.ar-image > p{
    display: none;
}

.ar-image:hover > p{
    position: absolute;
    top: 0;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: .4s ease-in-out;
    line-height:150px;
    margin:0;
}

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

注意：由于文本是绝对定位的，我已将其从背景容器中移除并放置在外部。

并为主容器（'.ar-image'）添加了 :hover 事件。

Answer 3

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

* {
  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>

Css 模糊背景图片：悬停但不悬停在文本上

Css blur on background image :hover but not on text

css

blur

hover