网页设计中,怎么用CSS做出磨砂的背景效果?

html-css018

网页设计中,怎么用CSS做出磨砂的背景效果?,第1张

代码:透明背景(带磨砂玻璃效果)  注:在粘贴到空白模板前一定先打个空格。

<STYLE type=text/css>

.bodytop{background:#transparent}

.banner{ background:#transparent}

.menu{ background:#transparent}

.bodyBg {background:#transparentfilter:progid:DXImageTransform.Microsoft.gradient(GradientType ='1',enabled='true',startColorstr=#AAFFFFFF, endColorstr=#AAFFFFFF)}

.zone{ background:#transparent}

.bodyBottom{background:#transparent}

.feeds .up{background:#transparent}

.feeds .down{background:#transparent }

.feeds .function{background:#transparent}

.feeds .page{background:#transparent}

.aList .sysHand .up{background:#transparent}

.aList .sysHand .down{background:#transparent}

.gbook .sysHand .up{background:#transparent}

.gbook .sysHand .down{background:#transparent}

.gbook .title{display:none}

.logo{display:none}

.gbook .page{background:#transparent }

.gbook .login{background:#transparent}

.box_1{background:#transparent}

.box_2{background:#transparent}

.calendar{background:#transparent}

.calendar .mid{background:#transparent}

.calendar .top{background:#transparent}

.calendar .title{background:#transparent}

.calendar .bold td{background:#transparent}

.calendar .bottom{background:#transparent}

.callboard .mid{background:#transparent}

.callboard .mid img{background:#transparent}

.callboard .front{background:#transparent}

.callboard .back{background:#transparent}

.callboard table{background:#transparent}

.callboard .up{background:#transparent}

.callboard .down{background:#transparent }

.sysBr{background:#transparent}

.sysBr210{background:#transparent}

.label{background:#transparent}

.label .mid{background:#transparent}

.label .top{background:#transparent}

.label .bottom{background:#transparent}

.photo{background:#transparent}

.photo .mid{background:#transparent}

.photo .image{background:#transparent}

.photo .top{background:#transparent}

.photo .bottom{background:#transparent}

.links{background:#transparent}

.links .up{background:#transparent}

.links .down{background:#transparent }

.links .mid{background:#transparent}

body{background:url("

http://s11.sinaimg.cn/orignal/439175a380fda7635072a

") repeat fixed!important}

.add{background:#transparent}

.add .ico{background:#transparent}

</STYLE>

假如页面有一个背景和一个透明的盒子,我们先将盒子范围内的背景截取下来,在透明盒子之后设置一个伪元素用绝对定位格式化长宽让其跟透明盒子一样大小,在将伪元素背景设置为刚刚截取的图片设置模糊、设置z-index让伪元素在透明盒子之后,在给透明盒子设置一点阴影就好了。

核心代码如下

最高就行, ios的高斯模糊设置的确实挺高. 但是css3的有缺陷就是想要让一个可以拖动的小窗口设置上背景模糊需要背景是图片. 如果不用图片直接给一个div设置那么模糊的就不是背景了,而是div本事. 倒是可以给背景元素设置模糊,然后给前面的窗口设置半透明. 但是这是全屏,不上局部