Question

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>

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

感谢

Answer 1

＆＃13;

string namesAsString = blobNames.Aggregate((i, j) => i + "UNIQUE_DELIMITER_CHARACTER_OF_YOUR_CHOICE" + j);

＆＃13;

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

＆＃13;

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

和：为主容器添加了悬停事件（＆＃39; .ar-image＆＃39;）。

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者，对结构进行微小更改并将文本拉出图像div，这样它就不会成为孩子并受到模糊的影响。

＆＃13;

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

＆＃13;

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

＆＃13;

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模糊：悬停但不是文本

3 个答案: