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

大家好，今日小科来聊聊一篇关于2022年02月04日整理发布：html怎么设置透明度的文章，现在让我们往下看看吧！

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

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以下的浏览器中完全无效。

方法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

这篇好文章是转载于：知行礼动