使用像 iOS 13 新 UI 一样的 html 和 css 顶部带有透明文本的模糊图像答案

【问题标题】：Blurry image with see-through text on top using html and css like iOS 13 new UI使用像 iOS 13 新 UI 一样的 html 和 css 顶部带有透明文本的模糊图像
【发布时间】：2020-02-24 07:41:23
【问题描述】：

所以基本上前几天，我在玩 Xcode。
我看到一段 Apple 视频解释了 iOS 13 中的 UI 和一些新的模糊效果，所以我对其进行了测试并非常喜欢它。
所以我得到的是一个带有模糊效果的图像，顶部有一些文字，但文字的模糊与图像不同，所以它有点难看。
结果如下：

所以基本上我想使用 HTML 和 CSS 来实现这一点，但看起来相当困难。
有没有办法做到这一点？

无论如何提前谢谢。

【问题讨论】：

标签： html css xcode ios13

【解决方案1】：

使用 CSS，您可以使用 opacity 属性或使用 rgba 颜色值。像这样：

<style>
div.background {
  background: url(https://loremflickr.com/320/240) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  /* using the opacity property */
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold; 
  /* Green background with 70% opacity */
  color: rgba(76, 175, 80, 0.7);
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

【讨论】：

【解决方案2】：

我的电脑目前不允许我看到图像，但如果你想模糊背景，你可以使用：

filter: blur(8px);
-webkit-filter: blur(8px);

等等，适用于每个浏览器。请务必将这些样式应用于图像本身，而不是容器。

你可以在这里查看效果：https://theexplorerblog.com/learning-base.php

希望这会有所帮助。

【讨论】：