如何在不模糊文本的情况下模糊图像？答案

【问题标题】：How to blur an image without blurring the text?如何在不模糊文本的情况下模糊图像？
【发布时间】：2021-06-27 19:18:14
【问题描述】：

我想让图像模糊，然后显示文字。我尝试了很多选项，但要么完全模糊，要么表现得很奇怪。

我的代码有点奇怪 :) 就像一个给出的信号。（我正在使用 Bootstrap）

.card-blur{
   z-index: 1;
}

.card-blur:hover {
  /* filter: blur(5px); */
  z-index: -1;
  filter: blur(5px) grayscale(1);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="card bg-dark text-white">
  <div class="card-blur">
  <img src="https://bi.im-g.pl/im/b5/34/11/z18038965V,Krzysztof-Kieslowski-po-pokazie--Amatora---1979-r-.jpg" class="card-img" alt="...">
  </div>
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

【问题讨论】：

标签： html css bootstrap-5

【解决方案1】：

我认为您的意思是模糊图像并在悬停时显示文本。

您需要做的是捕获父项上的悬停并影响子项。

这是模糊的关键：

.card:hover > .card-blur { ... }

显示文本：

.card:hover > .card-img-overlay { ... }

请检查下面的sn-p

/* Hide the overlay */
.card-img-overlay {
   z-index: -1;
}

/* Hover on card, blur the image */
.card:hover > .card-blur{
    filter: blur(5px) grayscale(1);
}

/* Hover on card, show the text by increasing z-index */
.card:hover > .card-img-overlay {
  z-index: 1;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="card bg-dark text-white">
  <div class="card-blur">
  <img src="https://bi.im-g.pl/im/b5/34/11/z18038965V,Krzysztof-Kieslowski-po-pokazie--Amatora---1979-r-.jpg" class="card-img" alt="...">
  </div>
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

【讨论】：

【解决方案2】：

#card-blur:not(:hover){
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

在你的 CSS 上试试这个。

【讨论】：