-
2016-05-13 16:46:02
BACKGROUND-COLOR: transparent;
<input type="text" style="color:white;BACKGROUND-COLOR: transparent;"/>
更多相关内容 -
CSS3 透明色 RGBA使用介绍
2020-12-11 15:27:30A:透明度。取值0~1之间 取值: <length> :Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色; <percentage> :Saturation(饱和度)。 取值为0%到100%之间的值; -
Css如何实现背景色透明或半透明但内容不透明
2020-12-13 10:03:161.针对IE浏览器 复制代码代码如下: .demo{ background-color:transparent; filter:progid:...–背景透明–> color:#fff;<!–字体颜色–> background-color:rgba(255,255,255,0.15)<!–最后一个参数设置透 -
CSS 制作带边框背景色透明的消息框
2020-09-22 11:40:04主要介绍了CSS 制作带边框背景色透明的消息框的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 -
关于css设置背景色透明,半透明
2021-08-04 07:56:07代码是filter: Alpha(Opacity=50)...其实说到半透明,相信绝大部分同仁应该都知道的一种很常用的方法,即css3的opacity结合iealpha滤镜即可。比如:.translucent{background:#000;opacity:0.5;filter:progid:DX...代码是
filter: Alpha(Opacity=50)
background-color: rgba(0, 0, 0, 0.5);
这种设置层里面所有的东西都透明了。
其实说到半透明,相信绝大部分同仁应该都知道的一种很常用的方法,即css3的opacity结合ie
alpha滤镜即可。比如:
.translucent{
background:#000;
opacity:
0.5;
filter:
progid:DXImageTransform.Microsoft.alpha(opacity=50);
}
上面这个样式类即为一个背景色为黑色,元素半透明的样式类。这也是目前半透明遮罩层最常用的方法,(ps:有个小地方需要注意,在ie6下需要触发它的haslayout或包裹性才有效,不过一般不存在问题,因为一般这种半透明遮罩的元素都是绝对定位的,overflow:hidden;或position:absolute;或float或display:inline-block都可以触发元素包裹性..这个问题扯远了,以后会单独再出一篇关于包裹性的文)
恩,正如各位看官所见,打开的层的确半透明了,不过半透明的好彻底,以至于层里面所有子元素都半透明了...但是我的层里面的图片和那个红色的块本来是不打算透明的,我只要背景色透明就好了..所以这个方法并没有满足这个需求。
于是,针对只要背景色透明的东东,应该有另一种办法,就是css3的rgba属性结合ie的gradient滤镜
.bg-translucent{
background:rgba(0,0,0,0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
}
这个稍微复杂一点
在CSS中有一个Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不同范围的透明度。具体语法如下:
{filter:
alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}
具体参数含义如下:
opacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。 finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。 style 指定透明区域的形状特征:0 代表统一形状,1 代表线形,2 代表放射状,3 代表矩形 startx 渐变透明效果开始处的 X坐标。 starty 渐变透明效果开始处的 Y坐标。 finishx 渐变透明效果结束处的 X坐标。 finishy 渐变透明效果结束处的 Y坐标。
以上的参数可以选用,可以只设置一个opacity
例如:
{filter:alpha(opacity=50)}
这个就是半透明的设置,只要把{}中的代码加入到需要设置的模版中的{}的即可,记得与前面的代码之间要用";"间隔,不然设置是无效的
例如:
我要设置模版区域背景的颜色(白色)+半透明[就是我现在blog的效果]
只要在
.modbox{}
.modbl{}
.modbc{}
.modbr{}
中都设置background-color:white
这些就是模版背景设置的ID
然后再在.modbox,.modbl,.modbc,.modbr{}如果没有这个的话可以自己加一个
中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了
如果希望像我这样只显示blog的背景,别的都全透明的话,那么就在别的模版中加入背景全透明的代码即可
background:transparent 这就是背景全透明的代码
不过这样的话,相关模版的主要区域是透明了,可是底下还会有一条颜色留着的,所以另外还要在
.modbl{}
.modbc{}
.modbr{}
中也加入背景全透明的代码,这样才能让模版区域完全透明,就像我现在的效果一样
另外这个参数目前只能用于背景色的设置,背景图片无法设置为半透明
-
css中透明色的颜色值(rgb/rgba)
2021-06-29 06:13:05对于RGB比较常见,显示器、电视等都是采用RGB的颜色标准。RGB是工业界的一种颜色标准,通过R(红)、G(绿)、B(蓝)三个...所以RGB的色彩组合是256*256*256共16777216,一般简称千万色或者1600万,也有称为24位色,及2的...对于RGB比较常见,显示器、电视等都是采用RGB的颜色标准。RGB是工业界的一种颜色标准,通过R(红)、G(绿)、B(蓝)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。我们知道计算机是0和1的世界,RGB每种色彩是用数字来表示,最大为255包括0,所以总共256级。所以RGB的色彩组合是256*256*256共16777216,一般简称千万色或者1600万,也有称为24位色,及2的24次方。在代码编程中常以16进制方式表示,如:0xff0000(红色)。
ARGB从表面看比RGB多了个A,也是一种色彩模式,是在RGB的基础上添加了Alpha(透明度)通道。透明度也是以0到255表示的,所以也是总共有256级,透明是0,不透明是255。代码编程中也是以16进制方式表示,如:0xffff0000。
background-color没有设置时,它的默认值是transparent,不可以继承父元素的取值。请问,这个透明色的rgb值是什么?rgb是只能指定颜色,不涉及透明
需要用rgba() 其中a就是透明度alpha的意思
用rgba,第四个参数为透明度 0-1,设置为0就是100%透明。background:rgba(0,0,0,0);
透明色可以是任意的颜色,就是一种颜色加的透明度。
CSS透明度的代码:
opacity:0.5;
filter:alpha(opacity=50);
background:#000;
这个的意思就是在黑色的基础上,透明度是百分五十。
根据你需要的颜色自己选择色值就行了。
各种颜色的透明色
以黑色为例:
黑色的十六进制色为#000000
要为其加上透明色则为:#(00-ff)000000即#(0-255)000000
其中全透明即为0阶,完全不透明即为255阶
因为0的十六进制为0;127的十六进制为7f,255的十六进制为ff
因此十六进制全透明的黑色为#00000000;半透明的黑色是#7f000000;完全不透明的黑色是#ff000000;
RGB颜色与16进制色以及透明色是我们在开发经常要用到的,不太明白可以花几分钟看看:
RGB色彩模式是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
透明色:是指这种颜色的透明情况。
1.RGB的三种颜色值的范围都是0~255,0表示这种颜色无,255表示纯色,从0到255,数值越大,颜色越深。
2.透明色的值也是0~255,0表示全透明,255表示不透明,数值越小,透明的越明显。
3.16进制色是指RGB的三个数值是10进制的,需要转成16进制数,在按RGB的顺序排列成16进制数,例如:
红(R):0 绿(G) :255 蓝(B):0 ------> #00ff00 --->对应的纯绿,没有设置透明,默认不透明。
设置透明色,那么把透明色数值转成16进制,并排在rgb三色的前面,如上面说的纯红色(不透明):#ffff0000
还有的说法是设置透明为90%,即10%不透明,全透是0,那么10%,相信都会算了吧,255*0.1=25.5,取25,转成16进制,
即19,所以如果给你的RGB是:e64dff,那么结果就是:#19e64dff
注意:
在安卓的布局XML中写颜色可写成:android:textColor="#19e64dff"
在代码设置时使用:paint.setColor(0x19e64dff)
透明度具体对应百分比:
100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00
RGB颜色对照表#FFFFFF#FFFFF0#FFFFE0#FFFF00
#FFFAFA#FFFAF0#FFFACD#FFF8DC
#FFF68F#FFF5EE#FFF0F5#FFEFDB
#FFEFD5#FFEC8B#FFEBCD#FFE7BA
#FFE4E1#FFE4C4#FFE4B5#FFE1FF
#FFDEAD#FFDAB9#FFD700#FFD39B
#FFC1C1#FFC125#FFC0CB#FFBBFF
#FFB90F#FFB6C1#FFB5C5#FFAEB9
#FFA54F#FFA500#FFA07A#FF8C69
#FF8C00#FF83FA#FF82AB#FF8247
#FF7F50#FF7F24#FF7F00#FF7256
#FF6EB4#FF6A6A#FF69B4#FF6347
#FF4500#FF4040#FF3E96#FF34B3
#FF3030#FF1493#FF00FF#FF0000
#FDF5E6#FCFCFC#FAFAFA#FAFAD2
#FAF0E6#FAEBD7#FA8072#F8F8FF
#F7F7F7#F5FFFA#F5F5F5#F5F5DC
#F5DEB3#F4F4F4#F4A460#F2F2F2
#F0FFFF#F0FFF0#F0F8FF#F0F0F0
#F0E68C#F08080#EEEEE0#EEEED1
#EEEE00#EEE9E9#EEE9BF#EEE8CD
#EEE8AA#EEE685#EEE5DE#EEE0E5
#EEDFCC#EEDC82#EED8AE#EED5D2
#EED5B7#EED2EE#EECFA1#EECBAD
#EEC900#EEC591#EEB4B4#EEB422
#EEAEEE#EEAD0E#EEA9B8#EEA2AD
#EE9A49#EE9A00#EE9572#EE82EE
#EE8262#EE7AE9#EE799F#EE7942
#EE7621#EE7600#EE6AA7#EE6A50
#EE6363#EE5C42#EE4000#EE3B3B
#EE3A8C#EE30A7#EE2C2C#EE1289
#EE00EE#EE0000#EDEDED#EBEBEB
#EAEAEA#E9967A#E8E8E8#E6E6FA
#E5E5E5#E3E3E3#E0FFFF#E0EEEE
#E0EEE0#E0E0E0#E066FF#DEDEDE
#DEB887#DDA0DD#DCDCDC#DC143C
#DBDBDB#DB7093#DAA520#DA70D6
#D9D9D9#D8BFD8#D6D6D6#D4D4D4
#D3D3D3#D2B48C#D2691E#D1EEEE
#D1D1D1#D15FEE#D02090#CFCFCF
#CDCDC1#CDCDB4#CDCD00#CDC9C9
#CDC9A5#CDC8B1#CDC673#CDC5BF
#CDC1C5#CDC0B0#CDBE70#CDBA96
#CDB7B5#CDB79E#CDB5CD#CDB38B
#CDAF95#CDAD00#CDAA7D#CD9B9B
#CD9B1D#CD96CD#CD950C#CD919E
#CD8C95#CD853F#CD8500#CD8162
#CD7054#CD69C9#CD6889#CD6839
#CD661D#CD6600#CD6090#CD5C5C
#CD5B45#CD5555#CD4F39#CD3700
#CD3333#CD3278#CD2990#CD2626
#CD1076#CD00CD#CD0000#CCCCCC
#CAFF70#CAE1FF#C9C9C9#C7C7C7
#C71585#C6E2FF#C67171#C5C1AA
#C4C4C4#C2C2C2#C1FFC1#C1CDCD
#C1CDC1#C1C1C1#C0FF3E#BFEFFF
#BFBFBF#BF3EFF#BEBEBE#BDBDBD
#BDB76B#BCEE68#BCD2EE#BC8F8F
#BBFFFF#BABABA#BA55D3#B9D3EE
#B8B8B8#B8860B#B7B7B7#B5B5B5
#B4EEB4#B4CDCD#B452CD#B3EE3A
#B3B3B3#B2DFEE#B23AEE#B22222
#B0E2FF#B0E0E6#B0C4DE#B0B0B0
#B03060#AEEEEE#ADFF2F#ADD8E6
#ADADAD#ABABAB#AB82FF#AAAAAA
#A9A9A9#A8A8A8#A6A6A6#A52A2A
#A4D3EE#A3A3A3#A2CD5A#A2B5CD
#A1A1A1#A0522D#A020F0#9FB6CD
#9F79EE#9E9E9E#9C9C9C#9BCD9B
#9B30FF#9AFF9A#9ACD32#9AC0CD
#9A32CD#999999#9932CC#98FB98
#98F5FF#97FFFF#96CDCD#969696
#949494#9400D3#9370DB#919191
#912CEE#90EE90#8FBC8F#8F8F8F
#8EE5EE#8E8E8E#8E8E38#8E388E
#8DEEEE#8DB6CD#8C8C8C#8B8B83
#8B8B7A#8B8B00#8B8989#8B8970
#8B8878#8B8682#8B864E#8B8386
#8B8378#8B814C#8B7E66#8B7D7B
#8B7D6B#8B7B8B#8B795E#8B7765
#8B7500#8B7355#8B6969#8B6914
#8B668B#8B6508#8B636C#8B5F65
#8B5A2B#8B5A00#8B5742#8B4C39
#8B4789#8B475D#8B4726#8B4513
#8B4500#8B3E2F#8B3A62#8B3A3A
#8B3626#8B2500#8B2323#8B2252
#8B1C62#8B1A1A#8B0A50#8B008B
#8B0000#8A8A8A#8A2BE2#8968CD
#87CEFF#87CEFA#87CEEB#878787
#858585#848484#8470FF#838B8B
#838B83#836FFF#828282#7FFFD4
#7FFF00#7F7F7F#7EC0EE#7D9EC0
#7D7D7D#7D26CD#7CFC00#7CCD7C
#7B68EE#7AC5CD#7A8B8B#7A7A7A
#7A67EE#7A378B#79CDCD#787878
#778899#76EEC6#76EE00#757575
#737373#71C671#7171C6#708090
#707070#6E8B3D#6E7B8B#6E6E6E
#6CA6CD#6C7B8B#6B8E23#6B6B6B
#6A5ACD#698B69#698B22#696969
#6959CD#68838B#68228B#66CDAA
#66CD00#668B8B#666666#6495ED
#63B8FF#636363#616161#607B8B
#5F9EA0#5E5E5E#5D478B#5CACEE
#5C5C5C#5B5B5B#595959#575757
#556B2F#555555#551A8B#54FF9F
#548B54#545454#53868B#528B8B
#525252#515151#4F94CD#4F4F4F
#4EEE94#4D4D4D#4B0082#4A708B
#4A4A4A#48D1CC#4876FF#483D8B
#474747#473C8B#4682B4#458B74
#458B00#454545#43CD80#436EEE
#424242#4169E1#40E0D0#404040
#3D3D3D#3CB371#3B3B3B#3A5FCD
#388E8E#383838#36648B#363636
#333333#32CD32#303030#2F4F4F
#2E8B57#2E2E2E#2B2B2B#292929
#282828#27408B#262626#242424
#228B22#218868#212121#20B2AA
#1F1F1F#1E90FF#1E1E1E#1C86EE
#1C1C1C#1A1A1A#191970#1874CD
#171717#141414#121212#104E8B
#0F0F0F#0D0D0D#0A0A0A#080808
#050505#030303#00FFFF#00FF7F
#00FF00#00FA9A#00F5FF#00EEEE
#00EE76#00EE00#00E5EE#00CED1
#00CDCD#00CD66#00CD00#00C5CD
#00BFFF#00B2EE#009ACD#008B8B
#008B45#008B00#00868B#00688B
#006400#0000FF#0000EE#0000CD
#0000AA#00008B#000080#000000
-
CSS设置背景颜色透明
2021-12-01 22:08:36CSS设置背景颜色透明 将背景颜色设置为透明,两种方法: 方法一:通过background-color和opacity来设置 opacity属性参数的不透明度是以数字表示的,从0.0到1.0,完全透明是0.0,完全不透明是1.0,数字越大代表元素越...CSS设置背景颜色透明
将背景颜色设置为透明,两种方法:
方法一:通过background-color和opacity来设置
opacity属性参数的不透明度是以数字表示的,从0.0到1.0,完全透明是0.0,完全不透明是1.0,数字越大代表元素越不透明。<div class="box01"> <p>今天星期三</p> </div> <div class="box02"> <p>和上面盒子对比</p> </div> <style> .box01 { width: 200px; height: 200px; background-color: brown; opacity: 0.3; } .box02 { width: 200px; height: 200px; background-color: brown; } </style>
效果:
如果盒子中有文字的话,文字会和背景颜色一起变透明。
方法二:通过rgba方式设置背景颜色透明
rgba颜色,就是RGB三原色加ALPHA,在给背景添加颜色的同时,提供透明度特性。
用法:background: rgba(R, G, B, A);<div class="box01"> <p>今天星期三</p> </div> <div class="box02"> <p>和上面盒子对比</p> </div> <style> .box01 { width: 200px; height: 200px; background-color: rgba(165, 42, 42, 0.3); } .box02 { width: 200px; height: 200px; background-color: brown; } </style>
效果:
使用时结合具体情况。 -
css 设置背景色为透明
2019-10-22 15:23:23/*完全透明*/ opacity: 0.7; /*整个按钮的不透明度,会影响到文字,0完全透明,1完全不透明*/ background: rgba(255, 255, 255, 0.7); /* 仅调节背景的色彩,并加上不透明度,此例为70%不透明的白色 */ 转发... -
css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍
2021-08-04 04:47:09本篇文章就来给大家介绍一下css设置背景颜色透明的方法。在css中设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。下面我们就来分别看看css中这两种方法实现背景颜色... -
CSS3 rgb and rgba(透明色)的使用
2020-09-24 04:52:14CSS 中的颜色有三种定义方式:使用颜色方法(RGB、RGBA、HSL、HSLA),十六进制颜色值和预定义的颜色名称。我们常使用的是RGB与RGBA。那我们就来说一下它们之间的区别吧! rgb与rgba的含义 RGB 是代表Red(红色) 、... -
CSS揭秘——透明边框
2021-08-05 03:06:45当我们在实现透明边框的时候,会遇到一些问题。在阐述这些问题之前,首先看看什么是透明边框,总的来说,就如下图所示。透明边框.png众所周知的是,一旦给一个元素设置了背景之后,那么这个背景所包含的区域是 ... -
css背景完全透明
2021-12-03 14:41:07background-color:transparent; -
css 背景色透明
2020-01-07 18:47:491.背景图透明化 opacity:0.5; //导致页面上的内容也被透明化 background:rgba(33,33,33,0.5); //透过rgba提供的透明特性则不存在这个问题 -
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2020-10-25 01:23:32主要介绍了JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法,详细分析了弹出遮罩层效果的实现方法以及完整的实例代码,需要的朋友可以参考下 -
如何用CSS绘制真正的透明边框?
2021-08-05 00:13:33注意:之前似乎有一个same problem,但我...如何用CSS绘制真正的透明边框?为什么我要这个?因为我有CSS menu with drop down on hover。在主菜单和子菜单之间,需要在它们之间存在间隙。间隙导致悬停失去焦点,从而... -
CSS设置背景颜色为透明
2020-01-17 15:49:30background-color:transparent; -
css background背景色透明的三种写法
2020-07-23 16:39:36css background背景色透明的三种写法 css background背景色透明的三种写法 -
css-背景色透明并且渐变
2017-09-12 10:18:02在工作中遇见了一个问题,给文字加背景色并且颜色渐变,而且兼容ie8,查了很久的资料,没有完美的解决这个问题,最终是换成了背景图,真是最简单有效的做法了。所以如果遇见相同的问题,建议直接换成背景图。效果图... -
css 背景色透明且渐变且不影响文字颜色
2021-01-09 11:11:44css 背景色透明且渐变且不影响文字颜色 rgba background: linear-gradient(90deg,rgba(255,159,0,0.16), rgba(255,102,0,0.16)); 使用opacity会使得文字的颜色也变得透明 -
纯css制作文字随时间变动而变色,文字变色效果,背景透明阴影
2019-11-05 21:08:33纯css制作文字随时间变动而变色,文字变色效果,背景透明阴影 -
CSS背景颜色透明
2021-06-11 03:19:28使用Less 语句//define mixin.crossbrowser(@color,@alpha){@rgba: rgba(red(@color),green(@color),blue(@color),@alpha);@argb: argb(@rgba);background-color: @color;background-color: @rgba;... -
css教程实现div背景色渐变色代码分享
2020-09-25 05:21:01一个简单div+css背景渐变色代码,大家参考使用吧 -
css背景颜色实现透明,利用rgba
2020-09-16 14:45:20rgba(0,0,0,0)就可以是背景色完全透明 效果图如下: -
css设置十六进制背景色和透明度
2021-11-29 15:40:11代码语法: background-clor: '#AACCEE32' 其中AACCEE是背景色,32代表透明度 透明度范围是0~255,其中透明度0的十六机制是00,255的十六进制是ff,大家可以用工具进行转换 案例: -
css背景色透明 内容不透明的解决方法(兼容所有浏览器)
2020-09-25 05:18:28css背景色透明,内容不透明的解决方法,兼容所有浏览器,大家运行看效果吧 -
纯CSS样式透明水滴文字特效
2021-07-24 19:44:32纯CSS样式透明水滴文字特效是一款使用css创建两个透明的水滴,蓝色系的水滴文字背景特效。 -
css 透明
2021-04-01 13:23:15css的透明有2种方式 一种是背景透明,rgba模式去加,这样只是背景透明,其中的字体等都不会透明,效果要好很多。 .updatelayer { background-color: rgba(220,38,38,0.2); } 一种是直接透明,但是其中的都会... -
div+css透明颜色的设置
2014-12-08 18:48:53今天调一页面,用的是公司的控件treelist,checkbox默认选中行的背景色是...但是在网上找了很多答案都没成功,很多都说,rgb没有设透明色的说法and不设置颜色就是透明色,结果都没成功。 后来发现:只要在任意颜色前