CSS模糊叠加 - 将模糊div放置在容器底部

Question

我想在包含背景图像的div上应用我的模糊和色调，而不是在背景图像上应用我的身体。有谁知道如何调整我的CSS来做到这一点？我认为这与我的:: before选择器有关。

Here's the JSFiddle for easier testing.

<div class="frosted">
    <p>My headline here</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg"  version="1.1">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
</svg>

/* I want to have this image as part of a class to apply to div's, ie .hero */
body {
    background: url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg);
    background-size: cover;
}

/* blur the same background as the body, but how to blur the background if I put the image on my new .hero class div? */
.frosted::before {
    position: absolute;
    margin: -8px 0 0 -8px;
    content: "";
    left: 0;
    top: 0;
    width: calc(16px + 100%);
    height: calc(16px + 100%);
    background: url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg) fixed;
    background-size: cover;
    -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -ms-filter: blur(8px);
    -o-filter: blur(8px);
    filter: url('#blur');
    z-index: -2;
}

/* add a tint layer to brighten (or darken) */
.frosted::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: -1;
}

/* The content */
.frosted {
    font-family: Avenir Next, Avenir, Verdana, sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #fff;
    position: absolute;
    margin: 20px;
    padding-left: 16px;
    width: 400px;
    height: 100px;
    border: 1px solid rgba(255,255,255,0.25);
    bottom:0;
}

Answer 1

进行一些更改后尝试此操作

Jsfiddle demo

HTML

<div class="widget center">
  <div class="text center">
    <h1 class="">Live CSS Blur</h1>
    <p>Go ahead, resize me.</p>
  </div>
  <div class="blur">
    <img src="http://i.imgur.com/uK4f3Ko.jpg" class="bg">
  </div>
</div>



<img src="http://i.imgur.com/uK4f3Ko.jpg" class="bg">



<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <filter id="blur">
   <feGaussianBlur stdDeviation="10" />
   </filter>
</svg> 

CSS

img.bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index:-2;
}

.blur{
  height:250px;
  width:100%;
  margin:-20px auto;
  z-index:-1;
  position:relative;
  filter: blur(10px); 
  -webkit-filter: blur(10px); 
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: url(#blur);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
  overflow:hidden;
}

.blur:after{
  content:'';
  height:100%;
  width:100%;
  background:rgba(255,255,255,.25);
  position:absolute;
}

.widget{
  border-top:2px solid white;
  border-bottom:2px solid white;
  height:200px;
  width:100%;
  overflow:hidden;
}

.center{
  position:absolute;
  margin: auto;
  top:0; bottom:2; left:0; right:0;
}




/*  ////////  NOT REQUIRED  //////////  */





.text {height:200px;width:240px;}
.text h1 {text-align:center;color:#3b3b3b;margin-top:70px;font-family: 'Arvo', serif;font-weight:400;font-size:36px;}
.text p {text-align:center;color:#3b3b3b;margin-top:0px;font-family: 'Lato', serif;font-weight:400;font-size:18px;}

updated fiddle

Answer 2

Solved http://jsfiddle.net/notanothercliche/c8yykqd4/2/

<div class="hero">

<div class="message-background"></div>

<div class="frosted">
    <p>My headline here</p>
</div><!-- end frosted -->

</div><!-- end hero -->

<svg xmlns="http://www.w3.org/2000/svg"  version="1.1">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
</svg>

.hero { max-width:1124px;max-height:300px; }
.message-background {
    background: url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg);
    background-size: cover;
    width:100%;
    height:100%;
    position:absolute;
    z-index:-5;
}

/* blur the same background as the body */
.frosted::before {
    position: absolute;
    margin: -5px 0 0 -5px;
    content: "";
    left: 0;
    top: 0;
    width: calc(10px + 100%);
    height: calc(10px + 100%);
    background: url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg) fixed;
    background-size: cover;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    -o-filter: blur(5px);
    filter: url('#blur');
    z-index: -2;
}

/* add a tint layer to brighten (or darken) */
.frosted::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: -1;
}

/* The content */
.frosted {
    font-family: Avenir Next, Avenir, Verdana, sans-serif;
    font-size: 32px;
    color: #fff;
    position: absolute;
    margin: 20px;
    padding-left: 16px;
    width: 400px;
    height: 100px;
    border: 1px solid rgba(255,255,255,0.25);
    bottom:0;
}