css3的背景图片高斯模糊 css设置背景图片虚化

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

如果不考虑兼容问题，可以参考css3的高斯滤镜。暂时只有webkit内核的浏览器支持，并且资源占用较大。

：一个很小的条状图，通过repeat后，形成一个很规则的大图背景。 但是css3出现以后，这个情况被改善了。background-size 属性可以让我们之前的希望成真。而且这个属性在firefox，chrome，以及ie9上都可以使用。

一张很大的图，宽达到1920左右，常见的显示器它都能覆盖，你再换大点的显示器分辨率会发现周围露出来了，并不是真的全屏。

取值：length：由浮点数字和单位标识符组成的长度值。不可为负值。percentage：取值为0%到100%之间的值。不可为负值。说明：设置背景图片的大小。指定背景大小，以象素或百分比显示。

可以使用：Background-size属性 语法：background-size ：[ length | percentage | auto ]{1，2} | cover | contain 取值：length：由浮点数字和单位标识符组成的长度值。不可为负值。

相关问答

Q1: Css3——background属性详解

1、background-position背景图像的位置。CSS3 background-size背景图片的尺寸。默认值：auto 其他值：像素，百分比，contain，cover background-origin背景图片的定位区域。

2、background是背景的意思，我们可以使用background属性来用于定义元素的背景效果。

3、css3新属性：RGBA和透明度 RGBA是RGB色彩模型的一个扩展。

4、一，background可以设置背景颜色、背景图片、定位等。而background-color只能设置背景颜色 。二，底色(background-color)是纯的色区。背景(background)，可以是纯色也可以是图案。

Q2: CSS3的background属性如何让背景图片显示完整,而且随浏览器窗口的变小...

css3可以做到兼容ie9和市面上的多数非IE内核浏览器，它的 background-size可以设置2个值，1个为必填，1个为可选。

background：url(背景.gif) repeat-y； 这个是背景纵向重复。

height：100%；background-image ： url(image.gif)；background-repeat ： no-repeat；此时设置的图片即可全屏幕显示。如果设置的是像素如“2000px”，可能会出现超出屏幕大小的现象，这样展示也就不美观了。

设置背景图片的大小。指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。

则0%-100%的透明度也被提供。PNG格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG格式的图片完全透明区域后面的内容。这样我们就可以完美兼容绝大多数的浏览器，实现用CSS让背景图片100%填充了。

css3的背景图片高斯模糊的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css设置背景图片虚化、css3的背景图片高斯模糊的信息别忘了在本站进行查找喔。