学做网站培训课程介绍

当前位置:

css设置半透明背景

在网页设计和网站制作过程中,为了达到某个效果需要网站布局的某个DIV是透明的或者是半透明的。如下图:

使用filter属性设置DIV背景为透明,半透明

怎么在自己做网站时运用这个CSS样式达到设置DIV背景为透明,半透明效果呢?

在CSS中有一个filter(滤镜效果)属性,可以设置它的值来达到DIV背景的透明程度,从不透明到半透明再到全透明的效果都可以轻易达到。(如果对HTML代码不了解,可以学习一下:html入门教程

设置DIV背景为透明,半透明的CSS样式代码:

div名{filter:alpha(opacity=100);
/*IE*/-moz-opacity:1.0;/*Moz+FF*/ }

代码解释:

通过设置“opacity=100”中后台的值,从0-100,数值越大,DIV层越透明。如果要求半透明,可以设置为50,全透明设置为100。带filter的层一定要有width宽度属性,否则filter无效。

代码举例:

DIV背景半透明,DIV中的字不半透明:

<div style="filter:alpha(opacity=50);background:#ffffff;width:600;"><span style="color:yellow">图层背景半透明,字体颜色也半透明</span></div>

图层背景半透明,字体颜色不半透明:

<div style="filter:alpha(opacity=50);background:#ffffff;width:600"><span style="position:relative;color:yellow">图层背景半透明,字体颜色不半透明</span></div>

通过设置DIV层的filter(滤镜效果),可以达到很多的效果:

黑白照片效果:

filter: gray;

X光照片效果:

filter: Xray;

风动模糊效果:

 filter: blur(add=true,direction=45,strength=30);

正弦波纹效果:

filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

半透明效果:

filter: Alpha(Opacity=50);

线型透明效果:

 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);

放射透明效果:

filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);

白色透明效果:

filter: Chroma(Color=#FFFFFF);

降低色彩效果:

 filter: grays;

底片效果效果:

filter: invert;

左右翻转效果:

filter: fliph;

垂直翻转效果:

 filter: flipv;

投影效果效果:

filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);

马赛克效果:

filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);

发光效果效果:

filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);

柔边效果效果:

 filter:alpha(opacity=100, finishOpacity=0,style=2

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 我们知道,网站伪静态可以形成静态页面,对于百度收录有着最大的好处。(相关知识:Discuz论坛后台SEO优化设置详细步骤)对于DISCUZ论坛程序实
  • css设置半透明背景 图文教程 (137844 次浏览)
    在网页设计和网站制作过程中,为了达到某个效果需要网站布局的某个DIV是透明的或者是半透明的。如下图:怎么在自己做网站时运用这个CSS样式达
  • 修改网站图片会使用到PS软件,如果我们想制作一张透明背景图片,请问一般使用什么格式的图片?
  • 网页如何添加背景音乐 视频教程附件下载 (1117066 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • 如何给网页添加背景图片 视频教程 (1117724 次浏览)
    使用DW软件给网页添加背景图片的步骤: 启动Dreamweaver程序,新建一个新的HTML文档,将文档保存到电脑的适当位置。 单击属性栏中的“属性