如何模糊div的背景图片，而又不模糊div的剩余网站或内容 [英] How to blur background image of div, without blurring the remaining site or the content of the div
本文介绍了如何模糊div的背景图片，而又不模糊div的剩余网站或内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试弄清楚如何使div的背景图像模糊.目标是仅模糊div的背景图像，而不是页面本身或div内容的背景.
I'm trying to figure out how to blur the background image of a div. The goal is to only blur the background image of the div and not the background of the page itself or the div contents.
以下是一个示例div:
Here is an example div:
<header class="intro">
<div class="background-image"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.
<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
CSS:
body {
width: 100%;
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
}
.intro .background-image {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
background-image: url(https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg) no-repeat bottom center scroll;
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.intro .intro-body {
z-index: 9999;
display: table-cell;
vertical-align: middle;
}
这是包含我尝试过的CSS的JS小提琴: http://jsfiddle.net/80jzdvqp/
Here is the JS fiddle containing the CSS I've tried: http://jsfiddle.net/80jzdvqp/
非常感谢您的帮助！
推荐答案
这是解决方案
<body><header class="intro">
<div class="background-image"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.
<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
</body>
Css:
body {
width: 100%;
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
margin: 0;
padding: 0;
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
}
.intro .background-image {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
-webkit-filter: blur(10px);
filter: blur(10px);
}
.intro .intro-body {
z-index: 9999;
display: table-cell;
vertical-align: middle;
}
这篇关于如何模糊div的背景图片，而又不模糊div的剩余网站或内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
