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

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

html css

Html CSS模糊叠加-将模糊div放置在容器底部,html,css,Html,Css,我想在包含我的背景图像的div上应用模糊和着色，而不是我的身体和背景图像。有人知道如何调整我的CSS来做到这一点吗？我认为这与我的：：before选择器有关我的标题在这里 /*我想把这个图像作为一个类的一部分应用到div的，即英雄*/ 身体{ 背景：url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg); 背景尺寸：封面； } /*模糊与身体相同的背景，但是如果我把图

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


我的标题在这里
/*我想把这个图像作为一个类的一部分应用到div的，即英雄*/
身体{
背景：url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg);
背景尺寸：封面；
}
/*模糊与身体相同的背景，但是如果我把图像放在我的新的英雄类div上，如何模糊背景呢*/
磨砂的，磨砂的{
位置：绝对位置；
裕度：-8px0-8px；
内容：“；
左：0；
排名：0；
宽度：钙（16px+100%）；
身高：calc（16px+100%）；
背景：url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg)固定的；
背景尺寸：封面；
-webkit过滤器：模糊（8px）；
-moz滤波器：模糊（8px）；
-ms过滤器：模糊（8px）；
-o-滤波器：模糊（8px）；
过滤器：url（“#模糊”）；
z指数：-2；
}
/*添加着色层以使其变亮（或变暗）*/
磨砂后{
位置：绝对位置；
内容：“；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
z指数：-1；
}
/*内容*/
.磨砂{
字体系列：Avenir Next、Avenir、Verdana、无衬线；
字号：600；
字体大小：32px；
颜色：#fff；
位置：绝对位置；
利润率：20px；
左侧填充：16px；
宽度：400px；
高度：100px；
边框：1px实心rgba（255255,0.25）；
底部：0；
}

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

HTML


我的标题在这里
.hero{最大宽度：1124px；最大高度：300px；}
.信息背景{
背景：url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg);
背景尺寸：封面；
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：-5；
}
/*模糊与身体相同的背景*/
磨砂的，磨砂的{
位置：绝对位置；
保证金：-5px0-5px；
内容：“；
左：0；
排名：0；
宽度：钙（10px+100%）；
高度：计算（10px+100%）；
背景：url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg)固定的；
背景尺寸：封面；
-webkit过滤器：模糊（5px）；
-moz过滤器：模糊（5px）；
-ms过滤器：模糊（5px）；
-o-滤波器：模糊（5px）；
过滤器：url（“#模糊”）；
z指数：-2；
}
/*添加着色层以使其变亮（或变暗）*/
磨砂后{
位置：绝对位置；
内容：“；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
z指数：-1；
}
/*内容*/
.磨砂{
字体系列：Avenir Next、Avenir、Verdana、无衬线；
字体大小：32px；
颜色：#fff；
位置：绝对位置；
利润率：20px；
左侧填充：16px；
宽度：400px；
高度：100px；
边框：1px实心rgba（255255,0.25）；
底部：0；
}

url（#blur）指向html中的

元素。然后，

#blur

将指向具有模糊效果的元素，该元素具有

id

属性匹配。我从来没有试过这个，听说它很不可靠。您可以使用svg或类似工具查找

css模糊，您将获得如何实现它的完整方法。尝试设置html，正文{宽度：100%；高度：100%；边距：0；填充：0；}
并给出宽度：100%；身高：100%
给你的.text.center
的所有父母。不，这似乎对结果没有任何影响。这就是我所说的怪异的。但问题肯定是这样解决的。如果使用元素检查器，您会注意到有一个元素的高度固定在250px左右。@nototherclice您需要在顶部使用模糊div，这就是问题使用该方法时背景图像不会调整大小。是否要调整哪个模糊或哪个模糊one@NotAnotherCliche你改变了你的问题不，是同一个问题，但我解决了定位问题，所以我更新了问题。
<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;
}

<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> 

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;}

<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;
}