如何将网页CSS背景图高斯模糊且全屏显示

html-css06

如何将网页CSS背景图高斯模糊且全屏显示,第1张

高斯模糊是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 标签

<img class=stock style=position: absolutetop: 0pxleft: 0pxheight: 100%width: 100%src=default.jpg补充方法3:使用 CSS3 的背景 Cover

.bg {background: #000 url(scale.jpg) no-repeat center center

-webkit-background-size: cover

-moz-background-size: cover

这个难以言表,主要原因:

1.

浏览器自身问题,浏览器对图片的渲染解析不行

2.

网速过慢,触发小图片加载

3.

CSS解析不够

4.

页面不支持

5.

浏览器完美不支持

既然如此,那就干脆background图片或者是元素里面内联width="43%"算了

你这种情况比较复杂!都是滤镜做的

字体动感模糊窗口--图层,右击字体图层,删格式化文件,滤镜--模糊--动感模糊,选择角度和距离,角度表示你动感模糊的方向,距离越大动感模糊效果越厉害

图片雾化在你原有图层上新建图层保证前景色和背景色为黑白,滤镜--渲染--云彩,将图层模式正常改为滤色即可。。如果觉得雾化太重可以适当降低不透明度