Html 图像上的模糊部分、实体边缘、响应图像
我试图用纯HTML/CSS复制以下模糊效果。我当前的appraoch使用了两幅图像，原始的封面图像，然后，使用CSSHtml 图像上的模糊部分、实体边缘、响应图像,html,css,css-filters,Html,Css,Css Filters,我试图用纯HTML/CSS复制以下模糊效果。我当前的appraoch使用了两幅图像，原始的封面图像，然后，使用CSS过滤器：blur（5px）的图像模糊bg图像的第二份副本 预期效果： 我找不到任何方法来保持工具栏底部的高度，同时保留一个背景图像等于整个封面图像的尺寸 当父元素不是位置：相对时，溢出：隐藏对子元素不起作用。但是，如果父图像是相对的，则内部模糊的bg图像与封面图像的尺寸不同 以下是基本设置： <div class="cover-image"> <di
过滤器：blur（5px）的图像模糊bg图像的第二份副本
预期效果：
我找不到任何方法来保持工具栏底部的高度，同时保留一个背景图像
等于整个封面图像的尺寸
当父元素不是位置：相对时，溢出：隐藏
对子元素不起作用。但是，如果父图像是相对的，则内部模糊的bg图像与封面图像的尺寸不同
以下是基本设置：
<div class="cover-image">
<div class="toolbar">
<div class="blurred-bg-image"></div>
</div>
</div>
到目前为止，我能找到的唯一解决方案是在模糊的bg图像上使用clip rect（）
，然后计算将其剪辑到哪里。但是，这是没有响应的，并将JS包含在混合中。我使用位于工具栏顶部的：：before将背景图像添加到工具栏中。图像区域和伪元素高度应使用基于根的单位，如vh
或rem
，因此，无论容器大小如何，它们的大小都相同。此外，伪元素背景设置与主背景设置相同。伪元素模糊，并使用工具栏的溢出：隐藏删除多余的背景
在此对话框中调整“结果”面板的大小
html，正文{
保证金：0；
填充：0；
}
.头像{
位置：相对位置；
最小高度：100px；
}
.top图像，.toolbar:：之前{
高度：50vh；/**图像和模糊区域高度**/
背景：url（'http://www.theplanningboardroom.net/wp-content/uploads/2011/06/sydney-city-buildings.jpg")不重复;；
背景尺寸：封面；
}
/**.toolbar:：before位于工具栏底部，因此多余的高度会上升**/
.toolbar、.toolbar:：之前{
位置：绝对位置；
右：0；
底部：0；
左：0；
}
.工具栏{
z指数：1；
/**高度也可以是百分比，例如20%**/
高度：100px；
/**隐藏背景的其余部分：：before**/
溢出：隐藏；
/**文本和控件的一些样式**/
框大小：边框框；
填充：10px；
文本对齐：居中；
}
.工具栏：：之前{
z指数：-1；
显示：块；
/**高度为全屏高度**/
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
内容：''；
}
文本和控件
内容
显示最终结果
方法
你可以使用这个方法
此方法利用了以下内容：
- 绝对定位
- 转变
- 一幅图像用于背景和模糊效果
您必须调整媒体查询，但这并不困难。我看到的唯一主要缺点是必须在工具栏内容上设置固定高度，因为该高度用于变换。不过，媒体查询也很容易做到这一点
有关源代码和演示，请参见以下代码段。我在CSS中添加了一些注释
html，
身体{
宽度：100%；
身高：100%；
}
.封面图片{
位置：相对位置；
最大宽度：1860px；
宽度：100%；
最大高度：560像素；
身高：100%；
溢出：隐藏；
背景色：#005FE5；
}
.工具栏{
位置：绝对；/*将.toolbar放在.cover图像的底部*/
底部：0；
左：0；
z指数：1；
宽度：100%；
身高：100%；
溢出：隐藏；/*防止psedou元素爆发*/
-webkit转换：translateY（100%）translateY（-10rem）；/*一直向下翻译，然后按.toolbar内容的高度备份*/
-moz变换：translateY（100%）translateY（-10rem）；
-ms变换：translateY（100%）translateY（-10rem）；
-o变换：translateY（100%）translateY（-10rem）；
转换：translateY（100%）translateY（-10rem）；
}
/*两个元素的背景相同，但稍后我们将模糊伪元素*/
.封面图片，
.工具栏：：之前{
背景图像：url（“https://dl.dropboxusercontent.com/s/3vzuc6vmfito1zg/austin-cityscape-night-hdr-1.jpg?dl=0");
背景重复：无重复；
背景位置：中底；
背景大小：封面；/*相应缩放背景*/
}
/*将此伪元素用于模糊效果*/
.工具栏：：之前{
内容：“；
位置：绝对位置；
底部：0；
左：0；
z指数：-1；
宽度：100%；
身高：100%；
-webkit转换：translateY（-100%）translateY（10rem）；/*与我们翻译的内容反向翻译。工具栏*/
-moz变换：translateY（-100%）translateY（10rem）；
-ms变换：translateY（-100%）translateY（10rem）；
-o-变换：translateY（-100%）translateY（10rem）；
转换：translateY（-100%）translateY（10rem）；
-webkit过滤器：模糊（10px）；/*最后！模糊效果*/
过滤器：模糊（10px）；
}
.工具栏内容{
位置：相对位置；
高度：10rem；/*在变换中使用此值*/
颜色：#FFF；
}
.工具栏内容{
位置：绝对位置；
最高：50%；
左：5%；
保证金：0；
填充：0；
-webkit转换：translateY（-50%）；
-莫兹变换：translateY（-50%）；
-ms转换：translateY（-50%）；
-o-变换：translateY（-50%）；
转化：translateY（-50%）；
列表样式：无；
}
.工具栏标题{
颜色：#A6BFC9；
文本转换：大写；
}
.编辑个人资料{
位置：绝对位置；
最高：50%；
右：5%；
-webkit转换：translateY（-50%）；
-莫兹变换：translateY（-50%）；
-ms转换：translateY（-5）
<html><head><link rel="stylesheet" type="text/css" href="glass.css"/></head>
<body>
<div id="bkgrd">
<div class="blur-bkgrd-position cropper flip ">
<div class="blur-bkgrd-position glass flip">
</div>
</div>
</div>
</body>
#bkgrd{
position:absolute; /*align very top left */
top:0; /*align very top left */
left:0; /*align very top left */
width: 100%; /* full screen for background cover/contain */
padding-top: 56.25%; /* helps "bkgrd-size contain" stretch to full width by breaking height limit */
/*image*/
background-image: url(yourbackground.jpg);
background-size: contain; /*responsive width-wise, no js */
background-repeat: no-repeat;
overflow: hidden;
}
.blur-bkgrd-position {
position:absolute;
top:50%; /*sets up cut off point*/
left:0; /*align very left */
width: 100%; /* full screen for background cover/contain */
padding-top: 56.25%; /* helps "bkgrd-size contain" stretch to full width by breaking height limit */
}
.glass {
/*blurred image*/
background:
/* dark blue */
linear-gradient(
rgba(0, 0, 30, 0.45),
rgba(0, 0, 30, 0.45)
),
url(yourbackground.jpg);
background-size: contain; /*responsive width-wise, no js */
background-repeat: no-repeat;
background-position: center bottom.
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.cropper {
overflow: hidden; /* performs the cropping */
}
/* apply to both .cropper and .glass */ /* enables crop from the top */
.flip {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.toolbar{
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}