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

html-css024

网页设计中，怎么用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>

要点：给需要磨砂的div(设rgba的那个元素) =>设置伪元素；

给伪元素content: ''、绝对定位，四处为0,left：0....

给伪元素一样的背景图，并给z-index: -1 、给自身z-index:1  ***重要，必须给！

最后给 伪元素  filter: blur(37px)  属性值，效果就出来了。

body{

background: url(./heroheart.jpg)   

background-size: cover

}

#app{

margin: 100px auto

width: 600px

height: 370px

background: rgba(0,0,0,.5)

padding: 100px

position: relative

z-index: 1

}

#app::after{

position: absolute

left: 0top: 0

bottom: 0right: 0

content: ''

background: url(./heroheart.jpg)

background-size:cover

z-index: -1

filter: blur(37px)

}

p{

font-size: 28px

color: #FFFFFF

margin-bottom: 30px

}

<div id="app">

<p>时间带走了回不去的青春，</p>

<p>却带不走我一往无前的心！</p>

<p>世间万物，万般困难、</p>

<p>能耐我何？</p>

</div>