700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html背景颜色透明度代码 css里定义背景色全透明或半透(background)方法

html背景颜色透明度代码 css里定义背景色全透明或半透(background)方法

时间:2023-06-13 21:07:35

相关推荐

html背景颜色透明度代码 css里定义背景色全透明或半透(background)方法

原创:张荣国

我们做网页,多数在css定义,说到背景色,一般大家都知道用:background或background-color加颜色码或颜色英文定义

比如:背景色为黑色就是:

background: #000000;

background-color: #000000;

background: black;

background-color: black;

以上都是可以的。

但随着css的版本越高,我们现在不仅只是设置颜色,还可定义为透明色或半透明等。那么怎么设呢,很简单,代码如下:

全透明:

background-color: transparent;

或 background: transparent;

都可以了,测一下试试,看是不是全透明了。

调整透明度代码:

除了用transparent来设置全透明外,其实,我们也可以用数值代码来设置透明度,看下面:

background-color: rgba(255,255,255,0.2);

首先,以上我们以白色为例设置透明度,比如上面的前三个数字是颜色值(相当于#FFFFFF),后面一个就是透明度了。而上面这组举例就是模仿白色全透明的,值为0.2,所以:如果你要调整透明度不要那么透,可加高数值,比如设为0.7的话,大概就只半透多点了。当然,你可以自己调试为你自己喜欢的透明度看看。

附注:兼容ie8代码:

以:background: rgba(255,255,255,0.7); 为例

//需要在元素的样式中添加filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3FFFFFF,endColorstr=#B3FFFFFF);

其中#E6FFFFFF中的B3代表:透明度的计算方法:256*0.7=179.2 取 179 通过计算转换为 十六进制 B3 (16制转换也即HEX用windows计算器的编程模式或程序员模式转换出来)。#FFFFFF是255,255,255的颜色代码。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。