学做网站培训课程介绍

当前位置:

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 附件下载 (1155075 次浏览)
    本节建站课程高清视频下载链接: https://pan.baidu.com/s/1sl6nR8D 密码: urwgdiv+css就是把设计师设计好的图片,转变成一张静态页面的技术。html
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 我们在做网站时,如果自己网站上的图片被别人复制过去,就会增加自己网站服务器的负担,所以在做网站时,需要做一些防盗链设置。如果你的空间支持.hta
  • 我们知道,网站伪静态可以形成静态页面,对于百度收录有着最大的好处。(相关知识:Discuz论坛后台SEO优化设置详细步骤)对于DISCUZ论坛程序实
  • css设置半透明背景 图文教程 (140471 次浏览)
    在网页设计和网站制作过程中,为了达到某个效果需要网站布局的某个DIV是透明的或者是半透明的。如下图:怎么在自己做网站时运用这个CSS样式达
  • 修改网站图片会使用到PS软件,如果我们想制作一张透明背景图片,请问一般使用什么格式的图片?
  • 默默无闻的网页我们看了成千上万,怎么让自己做网页能发声呢,来试试给网页添加一些背景音乐吧。(相关教程:如何在网页里添加背景音乐)网页中添加
  • DZ论坛程序上传之后,默认的是蓝底白字,不是很美观。怎么去更换自己需要的背景颜色和背景图片呢,有二种更换的方法,第一种是通过FTP软件找到相应的C