CodePen

Question

我的问题是，如何模糊我图像的某些部分？

Codepen of project（您可以按func startMonitoring() { self.locationManager.delegate = self let tokyo = CLLocationCoordinate2DMake(35.702141, 139.775123) self.monitoredRegion = CLCircularRegion(center: tokyo, radius: 100, identifier: "Tokyo") let newyork = CLLocationCoordinate2DMake(40.759188, -73.984659) self.monitoredRegion = CLCircularRegion(center: newyork, radius: 100, identifier: "newyork") let london = CLLocationCoordinate2DMake(51.510058, -0.134471) self.monitoredRegion = CLCircularRegion(center: london, radius: 100, identifier: "London") self.locationManager.startMonitoring(for: self.monitoredRegion) } func locationManager(_ manager: CLLocationManager, didEnterRegion region: CLRegion) { print("Enter:" + region.identifier) } func locationManager(_ manager: CLLocationManager, didExitRegion region: CLRegion) { print("Exit:" + region.identifier) }＆gt; Change View按照用户的意愿查看笔。）

它有一个普通的白色div，后面有背景图片。

如何让我的Full Page具有透明背景，.parent背景模糊？

另外，我如何才能使背景图像适合屏幕？

如果需要，请在下面发表评论以询问更多信息。

^{如果已经有关于此的类似帖子，我很抱歉。这是我在这个网站上的第二篇文章，所以如果我违反任何规则，我很抱歉。}

Answer 1

CodePen

另外，我如何才能使背景图像适合屏幕？

使用background-size: cover。

.parent具有透明背景

只需删除背景属性即可。或使用透明rbga colors 。

我的body背景模糊

由于图像小于背景，因此这是自然而然的。

我使用了filter属性，但该属性应用于整个元素。因此，您必须使用其他HTML元素这可能是pseudo element，但我只使用了div：

HTML：<div class="background"></div>。

CSS：

.background {
  background: url("https://ak6.picdn.net/shutterstock/videos/10908707/thumb/1.jpg");

  /* Apply major the blur filter. Change `1em` for more. */
  -webkit-filter: blur(1em);
  -moz-filter: blur(1em);
  -o-filter: blur(1em);
  -ms-filter: blur(1em);
  filter: blur(1em);

  /* Make background not move */
  position: fixed;

  /* ...and fill more than entire screen. Removes additional white sides from filter. */
  top: -1em;
  left: -1em;
  right: -1em;
  bottom: -1em;

  /* Make the element appear behind all others */
  z-index: -1;

  /* Make the background cover the entire element */
  background-size: cover;
}

在某些部分使我的图像模糊

1 个答案:

CodePen