您的位置: 城市头条网> 资讯 >

2022年02月04日整理发布:html怎么设置透明度

2023-07-31 18:32:12   互联网

如何设置html的透明度:1?通过“背景色:RGBA (0,152,50,0.7);”设置不透明度;2.使用半透明粒子图片或渐变半透明PNG图片;3.使用透明度和背景色或背景图片。


(资料图)

本文操作环境:windows7系统,HTML5CSS3版本3,戴尔G3电脑。

HTML/CSS标签透明效果的实现在HTML CSS编程中,通常有三种方法实现半透明背景,即使用RGBA、PNG和CSS滤镜。

方法一。第一个是HTML5的透明度,在H5支持透明背景色,但遗憾的是,H5的透明背景色只支持rgba书写,不支持十六进制书写,比如:

背景-color:rgba(0,152,50,0.7);//-70%不透明度

背景-color : transparent;支持完全透明

在传统浏览器中,IE浏览器的唯一性也是一些透明度设置的不确定性因素。

一般来说,在firefox、webkit、khtml阵营中实现透明的方式非常简单,包括IE9和比IE9大的浏览器使用上面的HTML5来设置透明。但是,这种方法在IE9以下的浏览器中完全无效。

【推荐学习:HTML视频教程】【推荐:css视频教程】

方法2第二种方法是使用半透明粒子图片、图案或渐变半透明PNG图片。这个方法是兼容的,只是IE6需要用插件修改PNG不透明的bug。

支持很好,设置可以重复,定位可以做,尺寸也可以在H5设置。但是如果你在网页上追求极致,加载的图片越少越好。

(粒子:透明度对称的图片裁剪到5px * 5px以下,加载速度快很多)

background:url(路径/my_png_bg.png)无重复居中滚动;

方法三。第三种方法是用透明背景色或背景图片来实现。

背景-color:rgb(0,152,50);

opacity:0.7background:url(路径/my_bg.jpg)无重复居中滚动;

opacity:0.7那么,问题来了。IE6-IE8完全不支持不透明度,所以我们不得不考虑IE的滤镜。

IE中有很多滤镜,其中alpha通道用来设置不透明度。

滤波器:(opactity=70)因此,上述方案进行了如下改进

背景-color:rgb(0,152,50);

opacity:0.7

filter:alpha(不透明度=70);background:url(路径/my_bg.jpg)无重复居中滚动;

opacity:0.7

filter:alpha(不透明度=70);

注意:不透明度或alpha的值强调“无”透明度。

综上所述,推荐第三种方案。

开发实用的html

meta charset="utf-8 "

标题不透明度/标题

meta http-equiv=" X-UA-Compatible "内容="IE=7,chrome=1.0 "

样式类型=“text/CSS”rel=“样式表”

*{

padding: 0px

margin:0px

}。mainbox{

宽度: 200 px;

高度: 200 px;

clear:两者;

飞越:隐藏;

margin: 100px自动0px自动;

背景-color : # f06;

}。子主盒

{

宽度: 250 px;

高度: 200 px;

margin :-50px auto 0px auto;

border:1px纯白色;

border-radius : 5px;

/* *背景-color:rgb(0,152,50);**/

background:url(路径/my_bg.jpg)无重复居中滚动;

opacity: 0.7

filter:alpha(不透明度=70);

}

/style

/head

身体

p class="mainbox "

/p

p class="子主盒"

/p

/body

/html以上是如何在html中设置透明度的细节。请多关注php中文网站的其他相关文章!

来源:php中文网站

标签:

新闻速递

精彩推送

联系我们:55 16 53 8@qq.com

网站地图  合作伙伴  版权声明  关于本站

京ICP备2021034106号-9 营业执照公示信息

城市资讯网版权所有,未经同意不得转载、复制或建立镜像