仅模糊背景图像而不是前面的文本[重复]答案

【问题标题】：Blur background-image only and not the text infront [duplicate]仅模糊背景图像而不是前面的文本[重复]
【发布时间】：2019-06-27 02:40:50
【问题描述】：

正如标题所说。如何模糊容器的background-image 而不模糊它前面的文本？

.container a .body-container {
  background-image: url("https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/02/Landscapes-01-jeremy-flint.jpg");
  filter: blur(1px);
}

<div class="card">
  <div class="head">
    <div class="title">
      <span>Card Title</span>
    </div>
  </div>
  <div class="body-container">
    <div class="body">
      <div class="content">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
      </div>
    </div>
  </div>
</div>

我在这里制作了 JSBin，https://jsbin.com/gizoyomuyi/1/edit?html,css,output

更新：抱歉，我更新了 JSBin 链接，因为我之前发布的链接已经过时了。

注意：左卡是我根据@Irin 的回答所做的更改，右卡是原样。

【问题讨论】：

这个骗子，还有更多，只需在 Google 中逐字逐句输入您的问题标题即可找到。

标签： html css blur

【解决方案1】：

要使背景模糊而不影响文本，您必须采用两个不同的div。一个用于背景图像，另一个用于文本。

您必须使用 position: absolute 来表示带有内容的 div。

请使用您的图片名称按照以下代码：

<html>
<head>
<style>
.body-container {
    background-image: url(https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    filter: blur(5px);
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.body {
    position: absolute;
    top: 50%;
    color: #fff;
    margin: 0px auto;
    width: 50%;
    text-align: center;
    right: 0%;
    left: 0%;
    font-size:25px;
}
</style>
</head>
<body>
<div class="card">
  <div class="head">
    <div class="title">
      <span>Card Title</span>
    </div>
  </div>
  <div class="body-container">

    </div>
        <div class="body">
      <div class="content">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </div>
      </div>
  </div>

</body>
</html>

【讨论】：

【解决方案2】：

试试这个

body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

a,
a:hover {
  color: black;
  text-decoration: none;
}

.head {
  border: 1px solid gray;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 20px;
}

.bg-image {
  /* The image used */
  background-image: url("https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/02/Landscapes-01-jeremy-flint.jpg");
  /* Add the blur effect */
  filter: blur(5px);
  -webkit-filter: blur(5px);
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* Position text in the middle of the page/image */

a {
  color: white;
  font-weight: bold;
  position: absolute;
  top: 74%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

<div class="head">
  <div class="title">
    <span>Card Title</span>
  </div>
</div>
<div class="bg-image"></div>
<div>
  <a href="#">
    <div class="card body-container">

      <div class="">
        <div class="body">
          <div class="content">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
          </div>
        </div>
      </div>
    </div>
  </a>

</div>

【讨论】：

我遵循了您建议的解决方案，但不幸的是，它不起作用。我更新了包含您的解决方案的 JSBin 链接。如果您碰巧再次访问该链接，左卡是您的解决方案，而右卡是原样。
你需要设置你的文本位置：absolute;请让我修复你的代码
当然，您可以更新 bin，然后将快照粘贴到此处。
我已经更新了，请查看@Jahm
您保存快照了吗？我可以知道链接吗？