css透明背景色
① css 用滤镜设置背景为透明色
1、滤镜:Alpha
语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
说明:
Opacity:起始值,取值为0~100, 0为透明,100为原图。
FinishOpacity:目标值。
Style:1或2或3
StartX:任意值
StartY:任意值
例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、滤镜:blur
语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
说明:
Add:一般为1,或0。
Direction:角度,0~315度,步长为45度。
Strength:效果增长的数值,一般5即可。
例子:filter:Blur(Add="1",Direction="45",Strength="5")
3、滤镜:Chroma
语法:STYLE="filter:Chroma(Color = color)"
说明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")
4、滤镜:DropShadow
语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
说明:Color:#rrggbb格式,任意。
Offx:X轴偏离值。
Offy:Y轴偏离值。
Positive:1或0。
例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、滤镜:FlipH
语法:STYLE="filter:FlipH"
例子:filter:FlipH
6、滤镜:FlipV
语法:STYLE="filter:FlipV"
例子:filter:FlipV
7、滤镜:glow
语法:STYLE="filter:Glow(Color=color, Strength=strength)"
说明:
Color:发光颜色。
Strength:强度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")
8、滤镜:gray
语法:STYLE="filter:Gray"
例子:filter:Gray
9、滤镜:invert
语法:STYLE="filter:Invert"
例子:filter:Invert
10、滤镜:mask
语法:STYLE="filter:Mask(Color=color)"
例子:filter:Mask (Color="#FFFFE0")
11、滤镜:shadow
语法:filter:Shadow(Color=color, Direction=direction)
说明:
Color:#rrggbb格式。
Direction:角度,0-315度,步长为45度。
例子:filter:Shadow (Color="#6699CC", Direction="135")
12、滤镜:wave
语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
说明:
Add:一般为1,或0。
Freq:变形值。
LightStrength:变形百分比。
Phase:角度变形百分比。
Strength:变形强度。
例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、滤镜:Xray
语法:STYLE="filter:Xray"
例子:filter:Xray
② css怎么让背景透明
.f1_a2_t_wz{
filter:alpha(opacity=50);
opicaty:50;
}
③ 在css中怎样让文字的背景色透明
设置元素的透明度:
-moz-opacity:0.8; /*在Firefox中设置元素透明度
filter: alpha(opacity=80); /*ie使用滤镜设置透明
但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了。
例如:
<div><p>不透明</p></div>
div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;
height:500px;color:#F30; font-size:32px; font-weight:bold; }
可以很明显的看出文字也被半透明的,这是我们不想看到的效果。
以前我曾经是绝对定位的方法解决这个问题,也就是现在的p并不是div的子元素。
<div></div>
<p>不透明</p>
这样div的半透明效果也就不会影响到元素p了。最后在将p定位到需要的位置。
但是很多时候这样的标签并不是很合理,有可能还会多浪费几个标签。
下面的这种方法就可以解决上面的问题了:
div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明,文字不透明*/
background:#000; filter:Alpha(opacity=20);/*实现IE背景透明*/
width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}
div p{ position:relative;}/*实现IE文字不透明*/
④ CSS怎么设置让背景颜色透明,而文字不透明
1、首先我们新建一个html文件,添加一个DIV,设置宽度和高度,以及背景色填充为红色。
⑤ CSS如何定义DIV背景半透明颜色
“长城郭靖”回答的是错的,他答的是让整个元素半透明
只让背景半透明只有一专个办法,就是用rgba颜色属,代码如下
background:rgba(0,0,0,0.5)
解释:这是黑色半透明的代码
前三个值表示颜色的red,green,blue值
最后一个表示alpha值,就是透明度值,不透明为1
(支持IE8+以及所有现代浏览器)
还是不懂的话,可以参考 网络 “rgba”词条 和 “CSS 颜色值”词条
⑥ 在div+css中怎么让背景颜色透明
css中有一个opacity属性,可以设置透明度
如下例子:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
.div1{width:200px;height:200px;opacity:0.6;background:red;}
</style>
</head>
<body>
<divclass="div1"></div>
</body>
</html>
⑦ 请问用CSS设置背景透明之后还能让鼠标经过时改变背景色吗(经过时背景无所谓透不透明)
不是js的问题,是css优先级问题,ID的优先级比class的优先级高,而且你用了important,再而且css是后面的覆盖前面的!
所以你后面的check样式被覆盖了,解决办法可以是这样声明你的check
#p1.check{
background-color:red!important;/*因为之前声明的背景色有这个important标识所以这里要加上,保证优先级高于#p1*/
}
或者,重新声明你的p1 给他加上个class .p1 把给#p1的样式加给.p1
.p1{
height:18px;
float:left;
padding:2px4px2px4px;
margin-left:5px;
cursor:pointer;
background:rgba(170,150,174,0.5)nonerepeatscroll00!important;
filter:Alpha(opacity=80);background:#fff;
}
.check{
background-color:red!important;
}
这是你上面描述的,我觉得1L说的也对啊,你直接用#p1:hover{background:red;}不就达到你的效果了吗,写这么多行要起到的作用不就和这一行一样吗...你还有别的想法我就不知道了。
⑧ CSS中背景颜色透明度如何设置
opicaty:50; // 0-100为透明值 100为不透明
不过,ie8及以下不识别,
所以要针对它们再写一句
filter:alpha(opacity=50);
⑨ CSS/DIV背景色透明代码问题
背景透来明方法常用的两源种方法:
方法一:
使用background属性 { background:rgba(0,0,0,0.6);} 前三个参数是颜色的rgb值,最后一个参数是透明度,0.6就是60%的透明度。只能兼容到ie9及以上浏览器。
方法二:
使用半透明图片{backgroun-images:url(这里是png半透明图片的路径);}默认全部铺满div,只要控制png透明图片的透明度就可以了。ie6不支持该方法,但是ie6使用群体已经想当少了,可以忽略。
以此类推,div和任何标签都可以使用以上两种方法。
⑩ html-css 中如何让一个DIV的背景色是透明的,但它的内容(文字图片之类的)不是透明的
抠个1px的背景图,半透明的,这是有效解决半透明兼容ie7到ie11以及其他主流浏览器最有效的方法