css背景图片高斯模糊_如何将网页CSS背景图高斯模糊且全屏显示
以Path为代表的,展示了这种背景图模糊并全屏显示的方法,而且会根据屏幕分辨率放大缩小。
这种效果应该怎么实现呢?
高斯模糊是PS、FW图片处理工具搞的。
全屏显示的方法
1:使用CSS
.bg {
background-image:url(scale.jpg);
-moz-background-size: 100% 100%; /* Firefox 3.6 */
-o-background-size: 100% 100%;/* Opera 9.5 */
-webkit-background-size: 100% 100%;/* Safari 3.0 */
background-size: 100% 100%;/* Firefox 4.0 and other CSS3-compliant browsers */
-moz-border-image: url(scale.jpg) 0; /* Firefox 3.5 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale');/* for < ie9 */
}
2:使用 IMG 标签
补充方法
3:使用 CSS3 的背景 Cover
.bg {
background: #000 url(scale.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
如果不考虑兼容问题,可以参考css3的高斯滤镜。暂时只有webkit内核的浏览器支持,并且资源占用较大。如果要兼容,也只有把图片先高斯模糊了。
-webkit-filter: blur(10px)
模糊可以使用 canvas 来实现.
blur(document.getElementById('logo'),'http://s.segmentfault.com/img/logo.png',2);
function blur(element, src, strength){
var image = new Image();
image.onload = function(e){
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = this.width;
canvas.height = this.height;
context.drawImage(this, 0, 0);
context.globalAlpha = 0.5; // Higher alpha made it more smooth
// Add blur layers by strength to x and y
// 2 made it a bit faster without noticeable quality loss
for (var y = -strength; y <= strength; y += 2) {
for (var x = -strength; x <= strength; x += 2) {
context.drawImage(canvas, x, y);
}
}
context.globalAlpha = 1;
element.style.backgroundImage = 'url('+canvas.toDataURL()+')';
}
image.src = src;
}
代码未测试。思路大概是这样。
css背景图片高斯模糊_如何将网页CSS背景图高斯模糊且全屏显示相关推荐
- vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: ...
- android启动时加载引导图片并全屏显示
前言:最近在做一个项目,项目要求app启动时加载引导图片,由于经验不足(技术一般般),在设计时踩了几个坑,不过好在最终也是做了出来,下面我把我的想法和步骤列一下,希望可以帮到各位新手android程序 ...
- html如何让网页全屏,使网页能全屏显示方法
不论是IE还是360安全浏览器,网页全屏显示方法如下: 单击视图--全屏显示,都可以进入网页全屏显示模式. 除了单击菜单,也可以按下网页全屏显示快捷键:F11键,按下F11键,就可以切换到网页全屏显示 ...
- Fullscreen API 全屏显示网页
Fullscreen API 全屏显示网页 第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrom ...
- html鼠标放上虚化背景图片,如何将网页CSS背景图高斯模糊且全屏显示
高斯模糊是PS.FW图片处理工具搞的. 全屏显示的方法 1:使用CSS.bg { background-image:url(scale.jpg); -moz-background-size: 100% ...
- 前端背景图放置_前端开发关于网页背景图片的缩放自适应及组合形成背景图的问题...
前端游戏开发贴吧 游戏前端开发 游戏开发流程 策划美术前端后端 昨天在切图时遇到如下两个问题: 1.需要背景图片无论浏览器大小如何缩放,背景图片始终宽度百分百显示. 2.需要将给出的一张背景图片和一张 ...
- php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上,如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上 如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
- php网页怎么插入背景图片,HTML中更换或添加网站背景图片的代码怎么写?(示例)...
本篇文章主要介绍了HTML代码中如何更换或添加网站背景图片?对于小白来说,最简单的方法就是,如果是更换背景图片的话. 我们可以在网页上点击鼠标右键查看网站源代码,然后找到css里面的背景图这一段代码, ...
- 背景图片平铺(HTML、CSS)
背景图片平铺(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset= ...
最新文章
- 过去50年最重要的统计学思想!
- 0112作业 字符串练习
- oracle有Boolean类型
- 深入理解HashMap和LinkedHashMap的区别
- 学习笔记(58):Python实战编程-Combobox
- junit 测试 dao_JUnit测试Spring Service和DAO(带有内存数据库)
- 四则运算题目生成程序(基于控制台)
- Can‘t start server : Bind on unix socket: Address already in use
- windbg --sqlserver 实例 转
- paip.提升性能---jvm java 工具使用.
- 挖金矿问题java课程设计_某15万吨金矿采矿方法课程设计
- html站点地图怎么做,网站地图(站点地图)详细介绍、以及如何制作详解
- 高尔顿钉板实验的matlab代码动画演示
- Deepin安装phpstorm教程
- 基于opencv答题卡识别
- 《数据结构C语言版》——绪论
- Visual Studio C++/C 游戏——双人贪吃蛇 实现方法+代码讲解+算法优化+成功展示+源代码+总结(超详细,适合小白)
- 【智能电视必装软件】小鲸电视、hdp直播国庆假期经典好剧随心看
- 中职生计算机系自我推荐作文,中职生自我鉴定
- 腾讯ai开放平台(智能闲聊)sdk----- python3.X