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

html-css07

如何将网页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

一、scale()方法

缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。

跟translate()方法一样，缩放scale()方法也有3种情况：

（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；

（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；

（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；

scale有2个参数。

@-webkit-keyframes rotating2 {

0% {

font-size: 16px

-webkit-transform: rotate(0deg)

}

100% {

font-size: 16px

-webkit-transform: rotate(-180deg)

}

}

动画过程中保持字体大小就可以了