コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
javascript - 如何在CSS毛玻璃效果上添加文字？
黄舟
黄舟 2017-04-11 11:18:03
0
2
852

最近写了一个简单的毛玻璃效果，操作流程是以一个图片为背景并模糊，同时再在此背景上加上一层半透明的效果就制成毛玻璃的特效，但是想在毛玻璃上输入文字却一直不显示，求一下问题出在哪里？如何解决？

html部分：

  <p class="container-fluid about">
    <p>关于我</p> <--此处不显示--!>
    <p class="intro">
    <p>关于我</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;
}
黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全員に返信(2)
左手右手慢动作
左手右手慢动作2017-04-11 11:20:03 2棟

.about 这个设置blur。你里面的内容也模糊了
.about .intro 这个你应该用absolute，top:0;left:0这样才能确保覆盖住了
和.about同级放一个p。给这个p设置absolute。就可以看到了，不行的话，再设置absolute

いいねを押す +0
返信を追加
洪涛
洪涛2017-04-11 11:20:03 1棟

正好刚做这个毛玻璃,顺便的来帮答一下.
效果对比

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 */
}

用法:
进行或本身模糊时,给body增加个class如<body class='blur_on'>
这里边有个注意的点:
不能直接body进行模糊,这样所有内容都模糊了也就没看头了,而是在需要的区域.blur如nav bg header进行模糊,这样我们可控不想模糊的地方清晰可见.
还有个注意的点:
css的模糊变产生白边,如果是白色背景倒没什么,图片背景如上文.wrap_bg即全文背景,模糊后会发现白边.那么你在body设置一样背景进行正片叠底就行了

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート