Question

我有2个div容器。我希望顶部容器模糊，内部容器具有不透明度。出于某种原因，两个容器都很模糊。为什么呢？

这是我的HTML和CSS：

<body>

<div class="page blurme">
    <div id="container">
        <p>blur background image with and opaque container</p>
    </div>
</div>

</body>

CSS

body, p {margin: 0; padding: 0;}

.page {
    overflow: auto;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
}

.blurme {
    -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
}

#container {width: 500px; min-height: 3500px; margin: 0 auto; border: 5px solid red; background-color: rgba(0,0,0, 0.7);}
#container > p {color: white;}

Answer 1

的jsfiddle https://jsfiddle.net/harshdand/b8y1s8cd/2/

HTML

<div class="page blurme"></div>
<div id="container">
    <p>blur background image with and opaque container</p>
</div>

JS

.page {
    position: relative;
    padding: 50px;
    height: 500px;
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
}
.blurme {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

#container {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 500px;
    min-height: 500px;
    margin: 0 auto;
    border: 5px solid red;
    background-color: rgba(0, 0, 0, 0.7);
}

Answer 2

我想走另一条路线并制作盒子，使它始终居中。

我找了一个JSFiddle让你看到差异。

我做了一个简单的谷歌搜索，得到了stackoverflow here的基础。

这是我使用的CSS：

html, body {
    margin: 0;
    padding: 0;
}
.background-image {
    background-image: url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg');
    background-size: cover;
    position: fixed;
    display: block;
    height: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
.content {
    border: 5px solid red;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    margin: 20px;
    z-index: 2;
    padding: 0 10px;
    color: white;
}

Answer 3

两个容器都变得模糊，因为#container元素位于.blurme元素中。如果只想模糊背景，则可以使用创建两个子元素。一个模糊的图像。另一个是具有2个孩子的不透明容器，第一个孩子包含另一个不能滚动的图像，另一个包含可以滚动的文本块。设置他们的z-index，根据需要调整他们的left和其他样式。

＆＃13;

body, p {margin: 0; padding: 0;}
		
.page {
    overflow: auto;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

.blurme {
    -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
    position: fixed; top: 0; bottom: 0; left: -200px; right: 0;
    z-index: -2;
}

.bg {
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
    position: fixed; top: 0; bottom: 0; left: -15px; right: 0;
    z-index: -1;
    width: 500px;
    margin: 0 auto;
}

#container {width: 500px; min-height: 3500px; margin: 0 auto; border: 5px solid red; background-color: rgba(0,0,0, 0.7);}
#container > p {color: white;}

＆＃13;

<div class="page">
    <div class="blurme"></div>
	<div id="container">
        <div class="bg"></div>
		<p>blur background image with and opaque container</p>
	</div>
</div>

＆＃13;

我给你举了一个例子。我认为你需要的更复杂。但无论如何，如果您只希望文本具有不透明度，那么您可以使用它，创建两个子元素，一个blur(5px)，另一个不是。

＆＃13;

body, p {margin: 0; padding: 0;}
		
.page {
    overflow: auto;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

.blurme {
    -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
    position: fixed; top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
}

#container {width: 500px; min-height: 3500px; margin: 0 auto; border: 5px solid red; background-color: rgba(0,0,0, 0.7);}
#container > p {color: white;}

＆＃13;

<div class="page">
    <div class="blurme"></div>
	<div id="container">
		<p>blur background image with and opaque container</p>
	</div>
</div>

＆＃13;

CSS顶部容器模糊但没有内部容器

3 个答案: