0

所以基本上前几天，我在搞乱 Xcode。
我看到一段 Apple 视频解释了 IOS 13 中的 UI 和一些新的模糊效果，所以我对其进行了测试并非常喜欢它。
所以我得到的是一个带有模糊效果的图像，顶部有一些文字，但文字的模糊与图像不同，所以它在某种程度上是很难看的。
结果如下：
在此处输入图像描述

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


无论如何提前谢谢。

4

2 回答 2

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>

于 2020-02-23T23:33:16.577 回答
1

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

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

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

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

希望这可以帮助。

于 2020-02-23T23:41:23.923 回答