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.
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>
The 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;
}
Here is the JS fiddle containing the CSS I've tried:
http://jsfiddle.net/80jzdvqp/
I would high appreciate some help!
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
