背景图像模糊

Question

我有2个问题，希望您能帮助我。

1. 在我所附的屏幕截图中，您可以看到左侧有一个人，右侧有一些文本。从图像到文本有一个清晰的过渡。我从中获得此信息的这个网站正在使用视觉作曲家。 （https://haartransplantation-vergleich.de/chancen/）

   但是如何通过自编码实现？

2. 所以我也想创建类似的东西，但我只希望图像背景稍微模糊一点。文本应可读。如何做到这一点？我已经尝试过使用“之前/之后”的方法，但是对我没有用。

期待您的来信。希望有人也可以共享一些代码，如果可能的话，因为我不知道如何在背景img模糊的情况下创建这样的号召性用语框。

Answer 1

• 这是CSS渐变
• 应用于:before伪元素
• 其样式可填充其“父级”元素的整个高度和宽度

使用Chrome浏览器中的Inspect Element并查看该元素的相关CSS很容易发现。

伪元素是在CSS中“启用”或“创建”的（与用HTML编写的常规元素相对），只需编写如下选择器即可：

/* style HTML element */

.person-grad {
  position: relative; /* provide positioning context */
}


/* create pseudoelement */

.person-grad:before {
  /* property required for the pseudoelement to appear */
  content: '';

  /* make the pseudo-element match the dimensions of the "parent" element */
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* more properties, including background gradient... */
}

Answer 2

您可以在图像上使用线性渐变来实现此效果。一种简单的方法是使用背景图片构建一个div，然后将div及其内容放入该div中。可以这样做：

<div class="blur">
  <div class="content">
    Content Here
  </div>
</div>

要设置“模糊”，您需要将背景图像分层放置在渐变之下。

.blur {
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #fff 50%), url('yourImage.png') no-repeat;
}

50%部分是渐变开始开始的地方，请根据您使用的图像进行调整。

我继续为您制作了一个样机HERE