当前位置: 首页 > 面试题库 >

是否可以使用-webkit-filter:blur(); 在背景图像上?

颜嘉福
2023-03-14
问题内容

是否可以-webkit-filter: blur();在背景图片上使用?

我已经试过了这段代码,它只是模糊了除背景图像之外的所有内容:

body {
  background-image: url('http://www.publicdomainpictures.net/pictures/10000/velka/pebbles-and-sea-11284647414Rbeh.jpg');
  background-attachment: fixed;
  -webkit-filter: blur(5px);
}

我已经搜索了一段时间,但是找不到任何描述该操作方法的资源。


问题答案:

将来的用户 :IE7,IE8,IE9,IE10,IE11或当前版本的EDGE不支持此功能。

除非您有备用广告,否则请勿在真实的网站上使用。

如果您正在寻找不依赖额外标记的解决方案,则可以将背景图像应用到主体上的伪元素并进行过滤。

body {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
}
body:before {
    content: "";
    position: absolute;
    background: url(http://lorempixel.com/420/255);
    background-size: cover;
    z-index: -1; /* Keep the background behind the content */
    height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */

    /* don't forget to use the prefixes you need */
    transform: scale(5);
    transform-origin: top left;
    filter: blur(2px);
}


 类似资料:
  • 我想自定义android studio编辑器背景,所以我想把图像设置为编辑器,有没有可能,有没有什么选项可以执行?

  • 问题内容: 我学习Java已有几周了,在将背景图像应用于JFrame时,我真的很困惑。我遇到的每个教程都不像我那样创建Frames(我扩展了JFrame),或者如果这样做,说明还不够清楚,我无法理解。 下面的代码来自我自己的项目,因此可以帮助我练习到目前为止所学的内容。请您能否以下面的代码为基础,并向我说明要添加的内容和位置,所以我可能以图像作为框架的背景? 我真正要感谢的一件事是,如果您能解释事

  • 问题内容: 我有此jquery代码,可在单击时更改背景图像: 但是,它没有改变。有什么我想念的吗? 问题答案: 您需要包括该属性的一部分。

  • 问题内容: 我有一个正在编写的CSS页面,我需要在一个类中应用背景图像,然后使用另一个类将一个局部透明的背景图像放在已经存在的背景图像之上。这只是一个简单的字眼,所以让我做一个示范。 在此示例中,第一个div应该具有背景图像1,第二个div应该具有背景图像1,但是滤镜图像位于其顶部,然后第三个div应该是图像2,第四个应该是图像2并且上面具有相同的滤镜。 但是,在此示例中,.backgroundF

  • 除了背景颜色,也可以使用背景图像来实现各种复杂、有趣的背景效果。CSS中,使用 background-image属性来定义背景图像的路径,取值为 none | url,默认值为 none。 url 可以是相对路径,也可以是绝对路径。使用相对路径时,url 是相对于 css 所在的文件,而不是要设置样式的HTML文件。如,下面代码表示,使用 css 文件所在目录下的 img 文件夹下的图像 bg.g

  • 问题内容: 我想在body标签上设置背景图片,然后运行一些代码-像这样: 如何确定背景图像已完全加载? 问题答案: 尝试这个: 这将在内存中创建新映像,并使用load事件检测何时加载src。