HTML里面如何做到控件、文字半透明

HTML里面如何做到控件、文字半透明,第1张

filter:alpha(opacity=50); /IE/

-moz-opacity:05; /火狐/

opacity:05; /opera (CSS3标准)/

1 Alpha:设置透明

Alpha(Opacity=, FinishOpacity=, Style=, StartX=, StartY=, FinishX=, FinishY=)

Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。

FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。

Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

StartX和StartY:代表渐变透明效果的开始X和Y坐标。

FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。

1、首先新建一个记事文本,重新命名背景颜色html,按回车确认,如下图所示。

2、回到桌面选中新创建的背景颜色html文件,右键选择记事本打开,然后在记事本中手动输入图中代码,这是一个标准的html头尾格式。

3、在<body>中添加代码:bgcolor="#000000",保存。

4、这时在桌面打开背景颜色html,打开页面显示为黑色背景,如下图所示就完成了。

在CSS中,增加透明度关键字,

推荐这个回答:

怎样在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。

——这是目前最专业的回答

在HTML中设置背景和背景颜色透明度有俩种方式:

1通过rgba的方式:

background-color:rgba(252, 252, 252, 05)

其中rgba里面的前三个值为颜色值,后面的值表示05是设置透明度为百分之五十

2通过background和opacity:

background:#000000;

opacity:05;

这里面opacity 属性设置元素的不透明级别;

话不多上图

在网页制作的过程中,有时会碰到需要设置的透明度这个虽然不是很常用但遇到这问题会让人不知从何下手,本文就来说下使用CSS如何制作网页透明

关于CSS Alpha透明的相关知识。先请看如下代码:

filter:alpha(opacity=50); / IE /

-moz-opacity:05; / Moz + FF /

opacity: 05; / 支持CSS3的浏览器(FF 15也支持)/

简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。

从上面的代码中你没有看到Opera。没错,Opera还未支持标准的opacity,也没有其私有的可支持Alpha透明的属性。

但是,我们知道,Opera是支持Alpha透明的PNG的(当然Moz Family也支持)。所以我们可以使用背景来实现Alpha透明效果。

关键在于:

background:transparent url(alpha80png) left top repeat!important;

background:#ccc;

filter:alpha(opacity=50);

既然Moz Family支持Alpha透明的PNG,所以我们没有必要使用其私有属性了。当然,你可以使用标准的opacity,但别同时使用Alpha透明和opacity,这样的话就成了两者的混合了。你可以把上面的例子下载过来,然后/opacity:5;/的注释看看。

以上就是关于HTML里面如何做到控件、文字半透明全部的内容,包括:HTML里面如何做到控件、文字半透明、如何设置HTML图片的背景颜色为透明的、请问各位html大神,如何将如图所示的导航栏设置透明度我只学了html和css,请教各位有简单的等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址:https://54852.com/web/9349093.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存