Question

为什么在div背景上应用CSS3 blur（）时，它不起作用？

仅在内容中模糊，我需要模糊＆＃34; background-overlay-div＆＃34;，包括背景上的顶部栏和按钮，请参阅：

.cd-user-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 54, 66, 0.9);
  z-index: 3;
  overflow-y: auto;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s, visibility 0.3s;
  -moz-transition: opacity 0.3s, visibility 0.3s;
  transition: opacity 0.3s, visibility 0.3s;
  -webkit-filter: blur(1.5px);
  -moz-filter: blur(1.5px);
  -o-filter: blur(1.5px);
  -ms-filter: blur(1.5px);
  filter: blur(1.5px);
}

我做错了什么？提前谢谢！

Answer 1

＆＃13;

body {
  width: 100vw;
  height: 100vh;
  background-color: #006600;
  margin: 0%;  
}
	
.bg {
  width: 100%;
  height: 100%;
  background-image: url('http://i.imgur.com/PfXAyaG.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(4px); /* Chrome, Safari, Opera */
  filter: blur(4px);
}

#content {
  color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;  
}

＆＃13;

<div class="bg"></div>
<div id="content"><h1>- Hello, world.</h1></div>

＆＃13;

CSS 3 - 模糊效果叠加模态背景

1 个答案: