Question

这是我的代码：

.header {
  width: 1200px;
  height: 350px;
  background-image: url("https://picsum.photos/1200/350");
  position: relative;
/*   filter: blur(5px); */
}

.content {
  width: 600px;
  height: 150px;
  background-color: red;
  position: absolute;
  bottom: 0;
  margin: 20px;
  display: flex;
}

.info {
  margin-left: 20px;
}

.otherImage {
  background-image: url("https://picsum.photos/320");
  width: 320px;
  height: 320px;
  margin: 15px;
  position: absolute;
  right: 0;
}

<div class="header">
  <div class="content">
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      <h1>Name goes here</h1>
      <p>Description goes here</p>
    </div>
  </div>
  <div class="otherImage">
  </div>
</div>

如果我取消注释模糊效果行，它将使div的所有内容模糊。相反，我想要的是仅使header div的背景图像模糊，而保持所有其他内容不变。

Answer 1

您可以让.header::before握住background：

.header {
  width: 1200px;
  height: 350px;
  position: relative;
}
.header::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-image: url("https://picsum.photos/1200/350");
  filter: blur(5px); 
}

.content {
  width: 600px;
  height: 150px;
  background-color: red;
  position: absolute;
  bottom: 0;
  margin: 20px;
  display: flex;
}

.info {
  margin-left: 20px;
}

.otherImage {
  background-image: url("https://picsum.photos/320");
  width: 320px;
  height: 320px;
  margin: 15px;
  position: absolute;
  right: 0;
}

<div class="header">
  <div class="content">
    <img src="https://via.placeholder.com/150" />
    <div class="info">
      <h1>Name goes here</h1>
      <p>Description goes here</p>
    </div>
  </div>
  <div class="otherImage">
  </div>
</div>

如何仅向div的背景图像添加模糊效果？

1 个答案: