最近寫了一個簡單的毛玻璃效果,操作流程是以一個圖片為背景并模糊,同時再在此背景上加上一層半透明的效果就制成毛玻璃的特效,但是想在毛玻璃上輸入文字卻一直不顯示,求一下問題出在哪里?如何解決?
html部分:
<p class="container-fluid about">
<p>關(guān)于我</p> <--此處不顯示--!>
<p class="intro">
<p>關(guān)于我</p><--此處不顯示--!>
</p>
</p>
css部分:
.about{
background: url(../images/home.jpg) no-repeat center center fixed;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
.about .intro{
background:rgba(0,0,0,0.2) no-repeat center fixed;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
人生最曼妙的風(fēng)景,竟是內(nèi)心的淡定與從容!
.about 這個設(shè)置blur。你里面的內(nèi)容也模糊了
.about .intro 這個你應(yīng)該用absolute,top:0;left:0這樣才能確保覆蓋住了
和.about同級放一個p。給這個p設(shè)置absolute。就可以看到了,不行的話,再設(shè)置absolute
正好剛做這個毛玻璃,順便的來幫答一下.
效果對比
html:
<body>
<p class='wrap_bg blur'>背景</p>
<p class='wrap'>
<p class='nav blur'>菜單</p>
<p class='tips'>彈出層或不需要模糊的層</p>
</p>
css:
.blur_on .blur{
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false); /* IE6~IE9 */
}
用法:
進(jìn)行或本身模糊時,給body增加個class如<body class='blur_on'>
這里邊有個注意的點(diǎn):
不能直接body進(jìn)行模糊,這樣所有內(nèi)容都模糊了也就沒看頭了,而是在需要的區(qū)域.blur如nav bg header進(jìn)行模糊,這樣我們可控不想模糊的地方清晰可見.
還有個注意的點(diǎn):
css的模糊變產(chǎn)生白邊,如果是白色背景倒沒什么,圖片背景如上文.wrap_bg即全文背景,模糊后會發(fā)現(xiàn)白邊.那么你在body設(shè)置一樣背景進(jìn)行正片疊底就行了