相关疑难解决方法(0)
你能模糊div下面/后面的内容吗？
我目前正在Photoshop中创建一个新的网页设计,但我想知道是否可以模糊div下面的内容？
我想nav在我的页面上创建一个半透明条,它固定在屏幕顶部.在我下面/后面流动的一切,我都想模糊.对于那些拥有iOS 7 iDevice的用户,请查看Safari的标题; 标题下方的页面模糊不清.这就是我正在寻找的效果.
我不介意效果不适用于旧浏览器(IE8等),在这种情况下,它将具有0.5不透明白色背景作为后备.
如果这是可能的,我真的在寻找必要的代码!
推荐指数
解决办法
查看次数
CSS:解决方案到背景滤镜？
backdrop-filter 是最近的css功能,现在还没有在现代浏览器中使用(至少截至2016年7月1日).
- Chrome 51支持
backdrop-filter通过Experimental Web Platform标志. - Safari 9.1支持
--webkit-前缀 - Firefox 47没有支持
处于这种无法使用的状态,我想知道是否存在任何其他方式来产生相同的结果.
JS的模糊,灰度等工作区也很受欢迎
backdrop-filter可以通过https://bugs.chromium.org/p/chromium/issues/detail?id=497522跟踪开发情况
推荐指数
解决办法
查看次数
如何使用CSS(和JavaScript？)来创建模糊的"磨砂"背景？
我正在尝试使用HTML5,CSS3和JavaScript创建一个可以在webkit浏览器上运行的iOS 7风格磨砂外观.
从技术上讲,给出以下HTML:
<style>
#partial-overlay {
width: 100%;
height: 20px;
background: rgba(255, 255, 255, .2); /* TODO frost */
position: fixed;
top: 0;
left: 0;
}
</style>
<div id="main-view">
<div style="width: 50px; height: 50px; background: #f00"></div>
To my left is a red box<br>
Now there is just text<br>
Text that goes on for a few pixels <br>
or even more
</div>
<div id="partial-overlay">
Here is some content
</div>
我想-webkit-filter: blur(5px)在水平的前20px处应用类似a的东西#main-view.
如果CSS被修改为#partial-overlay { width: 20px; height: …
推荐指数
解决办法
查看次数
模糊部分覆盖图像,实心边缘,响应图像
我试图用纯HTML/CSS复制以下模糊效果.我目前的appraoch使用2张图片,原始封面图片,然后是使用CSS 的图像blur-bg-image的第二个副本filter: blur(5px);.
期望的效果:
我找不到任何方法来保持底部部分工具栏的高度,同时保持background-image等于整个封面图像的尺寸.
overflow: hidden当父元素不是时,它对子元素不起作用position: relative.但如果父亲是亲戚,那么内部模糊的bg图像与封面图像的尺寸不同
这是基本设置:
<div class="cover-image">
<div class="toolbar">
<div class="blurred-bg-image"></div>
</div>
</div>
我能找到到目前为止,唯一的解决办法是使用clip rect()上的模糊-BG-图像,然后计算出在哪里把它夹到.但是,这不是响应,并包括JS混合.
推荐指数
解决办法
查看次数
如何模糊div后面的动态内容？
我正在使用全屏风格的谷歌地图页面进行项目.是否有任何方式(css,jQuery或其他选项......)覆盖标题和滑入式侧边栏,其模糊效果类似于iOS磨砂/模糊效果？
我试图实现这样的目标. 示例模糊标题
我的问题是,因为我不控制标题下面的内容并且它不断变化我不能使用2图像技巧来模拟模糊的背景.有什么建议？
推荐指数
解决办法
查看次数
使用CSS3模糊div后面的内容
我在将绝对/固定元素的背景应用模糊时遇到了问题,因为它似乎不会模糊页面的主要内容,只会模糊绝对元素本身的内容.我目前的警报样式如下:
.alert-wrap {
position: fixed;
z-index: 10;
right: 0;
bottom: 0;
}
.alert-wrap .alert {
display: block;
background-color: rgba(215, 44, 44, 0.5);
margin: 0 15px 15px 0;
position: relative;
}
.alert-wrap .alert:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
我希望这会模糊警报元素的背景,使其背后的主要内容看起来模糊(更多地关注元素本身),但是甚至没有找到任何确认存在这个问题的东西.
HTML文档流程如下:
<html>
<head>
<!-- Header Stuff Deleted -->
</head>
<body>
<div class='alert-wrap'>
<div class='alert'>
<div class='head'>
Notifications
</div>
<div …推荐指数
解决办法
查看次数