温馨提示:网站使用自适应技术,手机与电脑显示界面不同,电脑界面显示效果更佳。

做了个小站,积累一些技术,分享一些原创
    体会生活,记录一些小随笔,闲说心得

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的颜色代码。

点击数:731

你可能也喜欢下面相关文章:

发表评论

您的电子邮箱地址不会被公开。

如果涉及回复可见内容,请务必保留下面勾选保存浏览器,才能回复后你可见,否则无效

*

code