我想模糊背景 div。我只能找到适用于图像作为背景的解决方案，而不是 HTML 元素。它适用于移动应用，因此 CSS3 不是问题。我放了一个 JSfiddle一起展示我的困境。
我想要的结果:当下拉菜单出现时，它模糊了直接在它后面的所有元素的内容，而不是整个页面。
这里是来自 JSFiddle 的 HTML:
<a href="#" id="link">open/close</a>
<div id="slide">
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
</div>
<div id="page_content">
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
</div>
编辑:2013 年 6 月 18 日 13:00
我试图让“接受的答案”起作用，但出于某种原因，当从 JSfiddle 中提取时它不起作用
这是我的代码:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$( document ).ready(function() {
$('#link').click(function() {
$('#slide').slideToggle('slow', function() {
});
});
$('#main-view').click(function(){
html2canvas(document.body, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 100
});
$('#cover').slideToggle('fast', function(){
$('#partial-overlay').slideToggle();
});
});
});
</script>
<style>
#link {
z-index: 1000;
position: absolute;
top:0;
left:0;
}
#partial-overlay {
padding-top: 20px;
display:none;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index:99;
}
canvas{
height: 100px;
position: fixed;
top: 0;
left: 0;
-webkit-filter:blur(2px);
}
#cover{
display:none;
height:99px;
width:100%;
background:#fff;
position:fixed;
top:0;
left:0;
}
#main-view {
width:300px;
}
</style>
</head>
<body>
<div id="main-view">
<a href="#" id="link">open/clode</a>
Page content, not images Page content, not images Page content, not images page_content Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content,
</div>
<div id="cover"></div>
<div id="partial-overlay">
<p>Some content here</p>
<p>Some content here</p>
</div>
</body>
</html>
我已经尝试过使用和不使用 DOM 就绪包装器
最佳答案
我相信这就是您要找的。我使用 Canvas 元素。我怀疑这会在使用此效果的 iOS7 的新待发布版本中变得非常流行。
fiddle http://jsfiddle.net/kevinPHPkevin/TfWs3/49/
$('#main-view').click(function(){
html2canvas(document.body, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 100
});
$('#cover').slideToggle('fast', function(){
$('#partial-overlay').slideToggle();
});
});
关于jquery - 模糊 div 的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17147029/
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption
我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam
我以为它已经安装了，但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs
我想在页面顶部创建自定义Jquery消息而不是标准RailsFlash消息。我想在我的投票底部附近创建一条即时消息。我的Controller:defvote_up@post=Post.find(params[:id])current_user.up_vote(@post)flash[:message]='Thanksforvoting!'redirect_to(root_path,:notice=>'Takforditindlæg,deternuonline!')rescueMakeVoteable::Exceptions::AlreadyVotedErrorflash[:error]
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
我有一个Rails应用程序，现在设置了ElasticSearch和Tiregem以在模型上进行搜索，我想知道我应该如何设置我的应用程序以对模型中的某些索引进行模糊字符串匹配。我将我的模型设置为索引标题、描述等内容，但我想对其中一些进行模糊字符串匹配，但我不确定在何处进行此操作。如果您想发表评论，我将在下面包含我的代码!谢谢!在Controller中:defsearch@resource=Resource.search(params[:q],:page=>(params[:page]||1),:per_page=>15,load:true)end在模型中:classResource'Us