时间戳

首页 > 解决方案 > 仅模糊背景图像而不是前面的文本

html - 仅模糊背景图像而不是前面的文本

问题描述

正如标题所说。如何模糊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 的回答所做的更改，右卡是原样。

标签： htmlcssblur

解决方案

要在不影响文本的情况下使背景模糊，您必须采用两个不同的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>

推荐阅读