当前位置:520彩票注册网址 > 520彩票登录 > CSS实现背景透明而背景上的文字不透明,css背景

CSS实现背景透明而背景上的文字不透明,css背景

文章作者:520彩票登录 上传时间:2019-10-10

Photoshop制作精美的透明高光字 (载入中...) 来源:78ps 作者:不详 本教程的文字效果需要背景来衬托。文字几乎是透明的,不过却有很强的质感效果。如果是纯色背景效果就没有那么明显。文字制作基本上以图层样式为主,其中也用到一些简单的滤镜纹理,制作难度不大。 最终效果 图片 1 1、首先按CTRL+N新建一个1000*500像素的文档。 图片 2

CSS实现背景透明而背景上的文字不透明,css背景文字不透明

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6下的BUG,但这也不困难,加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层,如登陆框、注册框、提示等,这时可能需要整个页面都要被半透明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就需要用CSS滤镜了。

假如有这样一个例子:“有一个DIV块,此DIV是黑色半透明的,但此DIV里面的内容要保持原状,不能透明”,那么我们该怎么做呢?

假如HTML部分我们这样写的

1 2 3 4 5 6 7 8 9 10 11 <div class="touMingDiv">     <div>         <h1>这是透明的层这是透明的层这是透明的层这是透明的层             这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层         </h1>     </div>     <p>         这是透明的层,但上边的文字和图片均不透明,兼容ie7,ie8,ie9,ie10,FF,Chrome     </p>     <img src="bg.jpg"/> </div>

对于CSS我们也许就这样写了

1 2 3 4 .touMingDiv{     filter:Alpha(opacity=60);     opacity:0.6; }

但经过测试我们发现,不仅div容器半透明了,连div里面的文字和图片都把透明了。由于这些滤镜的属性已经继承给了子元素,所以会出现这种效果。

我们可以用下面这种发法来实现

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .touMingDiv{     width:800px;     min-height:300px;     color:#fff;     background:rgba(0,0,0,0.6);     background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效,否侧ie10,FF,Cherome会失去透明效果*/     filter:Alpha(opacity=60);/*只对ie7,ie8有效*/ } .touMingDiv p, .touMingDiv div, .touMingDiv img{     position:relative;     /*或者是absolute,都可以使文字不透明,这样做还是为了     兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/ }

注意,上面background:rgba(0,0,0,0.6);只对ie9,ie10,FF,Chrome...等有效,不包括ie6,ie7,ie8,所以有了这几句代码:

1 2 background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效,否侧ie10,FF,Cherome会失去透明效果*/ filter:Alpha(opacity=60);/*只对ie7,ie8有效*/

另外还要对子级元素设置relative或者absolute属性,这样才能出现背景透明而背景上面的文字和图片正常显示的效果。

但这里的代码毅然不适合ie6,建议对于ie6就用png图片吧,然后用js做一下处理,可以参考我的另一篇文章

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到...

本文由520彩票注册网址发布于520彩票登录,转载请注明出处:CSS实现背景透明而背景上的文字不透明,css背景

关键词: