Question

如标题所述。如何使容器的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的答案所做的更改，而右卡则保持不变。

Answer 1

尝试一下

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>

Answer 2

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

您必须为内容的div使用position: absolute。

请使用您的图片名称遵循以下代码：

<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 个答案: