国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - 如何在CSS毛玻璃效果上添加文字?
黃舟
黃舟 2017-04-11 11:18:03
0
2
913

最近寫了一個簡單的毛玻璃效果,操作流程是以一個圖片為背景并模糊,同時再在此背景上加上一層半透明的效果就制成毛玻璃的特效,但是想在毛玻璃上輸入文字卻一直不顯示,求一下問題出在哪里?如何解決?

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)心的淡定與從容!

reply all(2)
左手右手慢動作

.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)行正片疊底就行了

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template