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

如题所述

举报该问题

推荐答案推荐于2016-01-11

一、高斯模糊是使用ps等工具实现的，方法如下（以ps为例）：

1、在ps中打开背景图；

2、点击菜单栏中的滤镜；

3、点击模糊，再选择高斯模糊，如图；

5、通过调整半径来调整模糊的强度（半径越大越模糊），如图：

二、全屏显示的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 */
}

温馨提示：答案为网友推荐，仅供参考

当前网址：http://00.wendadaohang.com/zd/ZIjBTInDj.html

其他回答

第1个回答 2015-05-30

高斯模糊是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: absolute; top: 0px; left: 0px; height: 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;

第2个回答推荐于2016-07-27

第3个回答 2015-07-10

全屏很简单，css3里面支持backgroud-size:100% 100%就行了，高斯模糊，是不是像IOS那样的像毛玻璃效果的，发个教程给你参考一下
http://www.wufangbo.com/css3-mo-hu-xiao-guo/
当然了，也可以直接用photoshop设置，直接设置成模糊的背景图片，建议是用代码设置，哪天想改成其他的不需要改图片，直接改代码参数就行了

相似回答

css火狐背景高斯模糊答：高斯模糊是图片处理工具搞的。处理的时候使用CSS上的数据修复代码再重新启动就可以了。

怎么通过css改变图片的颜色答：1、如果想改变css背景图片，一般的做法只能使用css滤镜；2、css滤镜主要包括：Speia滤镜灰度图滤镜高斯模糊滤镜反色滤镜饱和度滤镜对比度滤镜亮度滤镜色相旋转滤镜阴影滤镜 3、css滤镜在浏览器兼容是比较坑爹的问题，ie浏览器有自己一套滤镜filter家族，基本所有ie内核浏览器...

css 弹出模态框modals后背景如何高斯模糊?答：主要内容浮层假设有这样的HTML结构，那么让 .modal 绝对定位在 .container 上面，.container 设置 blur 即可。.modal { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,255,255,.8);}.show-modal .modal { ...

大家正在搜

网页如何取消全屏显示 360网页如何全屏显示网页背景图片适合网页网页全屏显示快捷键网页不能全屏显示电脑页面怎么全屏显示怎么把页面全屏显示网页背景图片怎么添加网页的背景图片怎么设置