如何设置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中文网站
标签: