学做网站培训课程介绍

当前位置:

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

发表评论

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

相关教程

  • CSS如何调整DIV顶部边距 图文教程 (126325 次浏览)
    作者: wenmp424Email: 1871663623@qq.com详细内容:想把网站LOGO往下调,同时把导航往上调,跟背景图对齐,里面那一句是添加上边距的呢,该怎
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下CSS控制文字水平居中、垂直居中。CSS控制文字水平居中,需要使用text-align属性,其
  • 我们知道,网站伪静态可以形成静态页面,对于百度收录有着最大的好处。(相关知识:Discuz论坛后台SEO优化设置详细步骤)对于DISCUZ论坛程序实
  • 用wordpress程序建站时,往往很难去设置产品的大小、重量、单价等参数,好在wordpress有一个自定义栏目功能。我们可以通过wordpress自定义栏目给产品
  • css设置半透明背景 图文教程 (137244 次浏览)
    在网页设计和网站制作过程中,为了达到某个效果需要网站布局的某个DIV是透明的或者是半透明的。如下图:怎么在自己做网站时运用这个CSS样式达
  • 建网站时,我们通过background属性设置背景颜色,默认情况下背景颜色的透明度为0。我们可以通过CSS代码来控制背景的透明度。控制背景透明度的属性
  • 网页如何添加背景音乐 视频教程附件下载 (1116942 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • 如何给网页添加背景图片 视频教程 (1117458 次浏览)
    使用DW软件给网页添加背景图片的步骤: 启动Dreamweaver程序,新建一个新的HTML文档,将文档保存到电脑的适当位置。 单击属性栏中的“属性