时间戳

首页 > 解决方案 > 我怎样才能模糊整个身体而不是唯一的一个div？

html - 我怎样才能模糊整个身体而不是唯一的一个div？

问题描述

我希望突出显示的白色 div 框后面的整个区域都应该模糊，但不是 div

标签： htmlcss

解决方案

将此添加到您的 body 元素（或您想要显示模糊的那个）的 CSS 中。

body {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

那8px是模糊效果的强度，可以根据需要进行更改。

这是一个例子：

body,
html {
  height: 100%;
}

.parent {
  height: 100%;
  width: 100%;
  position: fixed;
  background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
  background-size: cover;
  filter: blur(3px);
  z-index: 5;
  -webkit-filter: blur(3px);
}

.child {
  height: 200px;
  width: 200px;
  z-index: 10;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  position: fixed;
  background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
  background-size: cover;
}
<div class="parent">
</div>
<div class="child"></div>

推荐阅读