css中,如何设置前景色的透明度?

1px red solid;width:800px;height:800px;background-color:blue;} 3、运行结果为 4、设置背景颜色半透明的样式代码background-color:rgba(0,0,255,0.5);5、运行结果为 透明原理:把背景颜色设置为rgb的方式,然后再加一个透明度就可以设置为半透明了。注意:设置背景颜色时哪里应该写成rgba。
css中,如何设置前景色的透明度?
css控制透明度倒不麻烦。
filter:alpha(opacity=50); /*IE滤镜,透明度50%*/
-moz-opacity:0.5; /*Firefox私有,透明度50%*/
opacity:0.5;/*其他,透明度50%*/

举个例子:
通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试
#test{
background-color:#0000CC;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
width:100px;
height:100px;}

但是还是会有很多问题,浏览器兼容性问题,等
而且IE滤镜的频繁使用会使浏览器的执行效率降低。

所以不提倡过多使用。

也还有其他方法可以模拟,比如用宽高都是1px的透明png图片覆盖等等。

/**************************************************/
LZ自己举一反三啊,前景色不就是color么
#test{
background-color:#000}
#test span{
color:#fff;
zoom:1 /*触发IE下块级元素*/
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
<div id="test"><span>前景色透明度</span></div>

LZ看看“前景色透明度”这几个字是不是纯白色,还是白色的50%透明。2009-12-24
1、准备好初始化的代码
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
</head>
<body>
<div></div>
</body>
</html>
2、初始化样式
div{
border:1px red solid;
width:800px;
height:800px;
background-color:blue;
}
3、运行结果为

4、设置背景颜色半透明的样式代码background-color:rgba(0,0,255,0.5);

5、运行结果为

透明原理:把背景颜色设置为rgb的方式,然后再加一个透明度就可以设置为半透明了。
注意:设置背景颜色时哪里应该写成rgba。
2018-12-05
一、首先HTML布局:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css设置前景色透明</title></head><body><div class="box">我是一段文字</div></body></html>
二、没有加CSS的样式的效果显示:

三、加CSS样式的HTML:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css设置前景色透明</title><style type="text/css">.box {width: 700px;height: 350px;margin: 0 auto;color: white;background-color: orange;/*color: orange; 这个方式从视觉上是透明了的,原理就是把文字颜色设置成与背景颜色一样 有局限性 双击看得到文字 */color: transparent; /*根上面方法一样 双击看得到文字 比上面好 推荐*/}</style></head><body><div class="box">我是一段文字</div></body></html>
在开发工具里面的截图:

四、加了CSS样式的效果图:

2017-06-11
alpha是来设置透明度的。先来看一下它的表达格式:
filter:alpha(opacity=opcity,finishopacity=finishopacity,
style=style,startX=startX,startY=startY,finishX=finishX,
finishY=finishY)

哇,怎么这么长。是啊,不过这些参数都各有其用。
Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形。
Finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。
从上面讲的我们可以看出,如果不设置透明渐变效果,那么只需设置opacity这一个参数就可以了。

实现上面这种效果的代码如下:

<html>
<head>
<title>alpha</title>
<style>//*定义CSS样式*//
<!--
div{position:absolute; left:50;top:70; width:150; }
//*定义DIV区域内的样式(位置为绝对定位,left、top、width的坐标)*//
img{position:absolute;top:20;left:40;
filter:alpha(opacity=80)}
//*定义图片的样式,绝对定位,滤镜属性是透明度为80*//
-->
</style>
</head>
<body>
<div>
<p style=“font-size:48;font-weight:bold;color:red;”>
Beautiful </p>//*定义字体属性,前景色为红色*//
</div>
<p><img src=“ss01076.jpg”> </p>
//*导入一张图片*//
</body>
</html>2009-12-24
最好是用CSS3的RGBA属性,透明滤镜(filter:alpha)是IE ONLY,不建议使用2009-12-24
把类为box的层设为透明。
<div class="box"></div>
<style>
.box{width:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3}
</style>
其中background:#000; filter:alpha(opacity:30); opacity:0.3;为关键代码,当opacity值为1时,表示完全不透明,为0时表示完全透明。
其关的属性介绍如下:
opacity: 0.3;这是“最重要的”,因为它是在CSS的现行标准。这将在Firefox,Safari和Opera的大多数版本的工作。这将是所需要的一切如果所有的浏览器都支持目前的标准。
filter:alpha(opacity=50); /*IE滤镜,透明度50%*/

-moz-opacity:0.5; /*Firefox私有,透明度50%*/
opacity:0.5;/*其他,透明度50%*/2015-11-05
mengvlog 阅读 9 次 更新于 2025-07-20 05:11:36 我来答关注问题0
  • 透明原理:把背景颜色设置为rgb的方式,然后再加一个透明度就可以设置为半透明了。注意:设置背景颜色时哪里应该写成rgba。

  •  codslf Dreamweaver里怎样设置背景颜色的透明度?

    //*设置透明渐变效果,起始坐标,终止渐变坐标,并设置透明样式值(style=1)为 线形*// 这段代码产生的效果如左下图所示,右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果,点击缩略图可放大。Style=1 Style=2 Style=3 以上是CSS的Alpha滤镜属性的应用,具体应用还需要您自己找...

  •  武汉誉祥科技 DW如何实现鼠标经过时改变表格的前景色

    首先,选择需要改变前景色的表格。然后,在DW中找到滤镜选项,设置滤镜效果为当鼠标经过时,透明度变为0。这样,背景色就会显现出来。操作完成后,你可以预览效果,确保鼠标经过时背景色正确显示。除了这种方法,你还可以考虑使用CSS来实现这一功能。CSS代码如下: .table-hover { transition: background-col...

  •  育知同创教育 有没有办法使用css设置字体的透明度

    2.设置透明度是不会被继承的,所以不用头疼继承的问题.字体透明度便设置成color:rgba(0,0,0,0.5);边框:border:5px solid rgba(0,0,0,0.5);或者背景都可以。3.兼容性。支持ie9及以上的浏览器 4.css2中opacity制作背景色通常用到,可是要用他来制作边框色或都说前景色的话,那他就有心...

  •  ggxrx CSS中的color\background-color有什么区别?

    color用于设置字体颜色,而background-color同于设置背景颜色。实例 1、color body { color:red; } h1{ color:#00ff00; } p{ color:rgb(0,0,255); } 2、background-color body{ background-color:yellow;} h1{ background-color:#00ff00; } p { background-color:rgb(255,0,...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部