Html 在模糊背景div中取消模糊内容

所以我真的很喜欢这种特殊效果，你可以模糊背景，让文本显示出来。我现在遇到的问题是，我想在我的第一个内容下面为我的第二个内容添加另一张壁纸。第一个内容很好。现在我想我的第二个内容是在第二个壁纸，因为你滚动。有点像创造一个视差效果，但相反，我正在创建自己独特的网站

这一次，我想要一张模糊的背景墙纸第二号，同时把东西放在我想要的地方并对焦

有没有办法做到这一点

从bg-image2开始，我希望bg-image2内的h1和p聚焦在模糊的背景图像上

注意：墙纸不会显示在下面的片段中，因为我已经在我的电脑文件夹中获得了所需的图片

身体 html{ 身高：100%； } * { 框大小：边框框； } .bg图像{ /*使用的图像*/ 背景图片：urlmages/wallpaper1.jpg； /*添加模糊效果*/ 过滤器：blur8px； -webkit过滤器：blur8px； /*全高*/ 身高：100%； /*将图像居中并精确缩放*/ 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； } *在页面/图像中间位置的文本*/ .bg文本{ 背景色：rgb0，0，0； /*退色*/ 背景色：rgba0,0,0,0.4； /*黑色w/不透明度/透明*/ 颜色：白色； 字体大小：粗体； 边框：3倍实心F1F1； 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； z指数：2； 宽度：80%； 填充：20px； 文本对齐：居中； } .bg-image2{ /*使用的图像*/ 背景图片：urlmages/wallper2.jpg； /*添加模糊效果*/ 过滤器：blur8px； -webkit过滤器：blur8px； /*全高*/ 身高：100%； /*将图像居中并精确缩放*/ 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； } .简介图片{ 位置：绝对位置； 左：50%； 利润率：200px自动； 转化：转化-50%，-50%； } 我的名字是斯塔克弗劳夫 我是一个网站

这是一个标题 这只是一段

---

这就是你想要的结果吗

我所做的只是在bg-image2和profilePicture周围创建一个div，这样bg-image2上的模糊不会影响profilePicture，然后将该div设置为position:relative，这样，PrimeLePixic可以像你一样放置在中间。

以下是您的HTML文件：

<div class="bg-image"></div>

<div class="bg-text">
    <h1>My name is Stackoverflow</h1>
    <p>And I am a website</p>
</div>

<div class="bg-test">
  <div class="bg-image2">

    <!-- This is the part where I want my stuff to not be blurred and focus -->

  </div>

  <div class="profilePicture">
      <img src="https://images.pexels.com/photos/1253661/pexels-photo-1253661.jpeg?cs=srgb&dl=android-wallpaper-bluhen-blume-1253661.jpg&fm=jpg" style="width: 170px; height: 170px; border-radius:50%;">
      <h1>This is a title</h1>
      <p>This is just a paragraph</p>
    </div>
</div>

---

这就是你想要的结果吗

我所做的只是在bg-image2和profilePicture周围创建一个div，这样bg-image2上的模糊不会影响profilePicture，然后将该div设置为position:relative，这样，PrimeLePixic可以像你一样放置在中间。

以下是您的HTML文件：

<div class="bg-image"></div>

<div class="bg-text">
    <h1>My name is Stackoverflow</h1>
    <p>And I am a website</p>
</div>

<div class="bg-test">
  <div class="bg-image2">

    <!-- This is the part where I want my stuff to not be blurred and focus -->

  </div>

  <div class="profilePicture">
      <img src="https://images.pexels.com/photos/1253661/pexels-photo-1253661.jpeg?cs=srgb&dl=android-wallpaper-bluhen-blume-1253661.jpg&fm=jpg" style="width: 170px; height: 170px; border-radius:50%;">
      <h1>This is a title</h1>
      <p>This is just a paragraph</p>
    </div>
</div>

---

我也面临着类似的问题。经过多次搜索，我找到了完美的解决方案。 你可以使用背景滤镜

您的代码：

身体 html{ 身高：100%； } * { 填充：0px； 边际：0px； 框大小：边框框； } .bg图像{ /*使用的图像*/ 背景图像：urlhttps://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&w=1000&q=80； /*添加模糊效果*/ /*全高*/ 身高：100%； /*将图像居中并精确缩放*/ 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； } *在页面/图像中间位置的文本*/ .bg测试{ 位置：相对位置； } .bg文本{ 背景色：rgb0，0，0； /*退色*/ 背景色：rgba0,0,0,0.4； /*黑色w/不透明度/透明*/ 颜色：白色； 字体大小：粗体； 背景滤镜：blur8px； 边框：3倍实心F1F1； 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； z指数：2； 宽度：80%； 填充：20px； 文本对齐：居中； } .bg-image2{ /*使用的图像*/ 背景图像：urlhttps://blog.prezi.com/wp-content/uploads/2019/03/patrick-tomasso-208114-unsplash-1024x768.jpg; /*添加模糊效果*/ /*全高*/ 高度：100vh； /*将图像居中并精确缩放*/ 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； } .简介图片{ 背景滤镜：blur8px； 高度：100vh； 宽度：100vw； 显示器：flex； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； 位置：绝对位置； 左：50%； 颜色：白色； 最高：50%； 保证金：0自动； 转换：翻译- 50%, -50%; } 我的名字是斯塔克弗劳夫 我是一个网站

这是一个标题 这只是一段

---

我也面临着类似的问题。经过多次搜索，我找到了完美的解决方案。 你可以使用背景滤镜

您的代码：

身体 html{ 身高：100%； } * { 填充：0px； 边际：0px； 框大小：边框框； } .bg图像{ /*使用的图像*/ 背景图像：urlhttps://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&w=1000&q=80； /*添加模糊效果*/ /*全高*/ 身高：100%； /*将图像居中并精确缩放*/ 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； } *在页面/图像中间位置的文本*/ .bg测试{ 位置：相对位置； } .bg文本{ 背景色：rgb0，0，0； /*退色*/ 背景色：rgba0,0,0,0.4； /*黑色w/不透明度/透明*/ 颜色：白色； 字体大小：粗体； 背景滤镜：blur8px； 边框：3倍实心F1F1； 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； z指数：2； 宽度：80%； 填充：20px； 文本对齐：居中； } .bg-image2{ /*使用的图像*/ 背景图像：urlhttps://blog.prezi.com/wp-content/uploads/2019/03/patrick-tomasso-208114-unsplash-1024x768.jpg; /*添加模糊效果*/ /*全高*/ 高度：100vh； /*将图像居中并精确缩放*/ 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； } .简介图片{ 背景滤镜：blur8px； 高度：100vh； 宽度：100vw； 显示器：flex； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； 位置：绝对位置； 左：50%； 颜色：白色； 最高：50%； 保证金：0自动； 转化：转化-50%，-50%； } 我的名字是斯塔克弗劳夫 我是一个网站

这是一个标题 这只是一段

---

你能不能先用Photoshop之类的滤镜模糊背景图像，然后再将它们作为背景图像，然后一起删除滤镜css？@KJEK Code正确的观点。我想我会坚持使用另一种工具设计照片的样式，然后再使用这些疯狂的编码使我的网站变得有点复杂。祝你好运。你能不能在将背景图像作为背景图像放置之前，使用Photoshop之类的过滤器模糊背景图像，并将其全部删除？@KJEK Code对，很好。我想我会坚持使用另一个工具来设计照片的样式，然后用这些疯狂的编码让我的网站变得有点复杂。祝你好运，这是一个干净的例子，也有很多评论。干得好。如果您将代码添加到中的答案中，使其能够自给自足，那就太好了。如果钢笔被删除和/或不可用，答案将变得不完整，因此对社区毫无用处。想得好。完成！很好的干净的例子和大量的评论。干得好。如果您将代码添加到中的答案中，使其能够自给自足，那就太好了。如果钢笔被删除和/或不可用，答案将变得不完整，因此对社区毫无用处。想得好。完成！