css中如何设置透明度?

css中如何设置透明度?,第1张

怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为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:03;  -moz-opacity:03;-khtml-opacity: 03}

</style>

其中background:#000; filter:alpha(opacity:30); opacity:03;为关键代码,当opacity值为1时,表示完全不透明,为0时表示完全透明。

其关的属性介绍如下:

opacity: 03;这是“最重要的”,因为它是在CSS的现行标准。这将在Firefox,Safari和Opera的大多数版本的工作。这将是你所需要的一切如果所有的浏览器都支持目前的标准。当然是他们不会错。

filter:alpha(opacity=30);这一个是针对IE浏览器

-moz-opacity:03;你需要这一个支持老版本的Mozilla浏览器如Netscape Navigator。

-khtml-opacity: 03;这是旧版本的Safari(1×)当渲染引擎是使用仍被称为kthml,而不是目前的WebKit。

css控制透明度倒不麻烦。
filter:alpha(opacity=50); /IE滤镜,透明度50%/
-moz-opacity:05; /Firefox私有,透明度50%/
opacity:05;/其他,透明度50%/
举个例子:
通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试
#test{
background-color:#0000CC;
filter:alpha(opacity=50);
-moz-opacity:05;
opacity:05;
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:05;
opacity:05;
}
<div id="test"><span>前景色透明度</span></div>
LZ看看“前景色透明度”这几个字是不是纯白色,还是白色的50%透明。
我可以帮助你,你先设置我最佳答案后,我百度Hii教你。你的串号我已经记下,采纳后我会帮你制作

<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=“ss01076jpg”> </p>
//导入一张//
</body>
</html>
如果在上面的代码中稍做改动,则将产生另外多种效果。我们只修改img的样式属性,把head中的Img样式属性代码改为如下所示:
img{position:absolute;top:20;left:40;
filter:alpha(opacity=0,finishopacity=100,
style=1,startx=0,starty=85,finishx=150,finishy=85);}

就是层叠加,

<div>放内容</div>
<div>用作透明背景</div>

然后使用定位技术把用作透明背景的div定位到内容层底下,然后设置该层透明度即可,透明层的圆角可使用css3进行优化,支持css3的浏览器显示圆角,否则显示直角,这都是facebook,renren的做法

设置div元素背景透明度,而不设置div里面元素透明度的方法:创建静态页面插入一个div和十个子div-类选择器和元素选择器设置div标签-打开浏览器预览-使用nthoftype设置div元素-保存打开浏览器预览。具体方法如下:

1、在openhbuilderx工具中,创建一个新的静态页面并插入一个div和十个子div。

2、使用类选择器和元素选择器设置div标签的样式,如宽度、高度、行高、文本中心等。

3、保存代码,直接打开浏览器预览界面。你能看见十个圆圈。

4、使用nthoftype设置多个div元素的背景色。

5、再次保存代码并打开浏览器预览效果。可以找到元素的背景色。


注意事项:

一般来说,我们可以使用CSS的opcity属性来改变一个元素的透明度,但是它的子元素的透明度也会改变,即子元素被重新定义了。例如:<div style="opacity:04; background-image:url();"><div style="opacity:10;">显示文字</div></div>文字元素的透明度也会是04。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12741403.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-27
下一篇 2023-05-27

发表评论

登录后才能评论

评论列表(0条)

保存