文档章节

HTML 使用CSS 设置透明度Opacity

IamOkay
 IamOkay
发布于 2014/11/16 17:15
字数 616
阅读 47903
收藏 15

HTML/CSS标签透明度效果的实现

在HTML+CSS编程中,实现半透明背景,通常有3中做法,分别是使用RGBA,PNG和CSS filter。

方法一.

第一种是HTML5的透明,在H5中支持透明背景颜色,但遗憾的是,H5中的办透明背景颜色只支持 rgba的写法,不支持16进制的写法如:

background-color:rgba(0,152,50,0.7);// -->70%的不透明度

background-color:transparent;支持完全透明

ososchina.demo.jpg

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

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

 

方法二

第二种是使用半透明粒子图片,图案或者渐变半透明PNG图片,这种方法是兼容性兼容性的,除了IE6需要使用插件来修改PNG不透明的bug外,

支持性非常好,设置可以重复,还可以定位,在H5中也可以设置大小,不过在网页中追求极致的话加载图片越少越好。

(粒子:透明度匀称的图片裁剪至5px * 5px以下,这样加载速度要快的多)

background:url(path/my_png_bg.png) no-repeat center center scroll;

ososchina.demo.jpg

方法三.

第三种方式是使用透明度+背景颜色或者背景图片来实现。

background-color:rgb(0,152,50);
opacity:0.7;
background:url(path/my_bg.jpg) no-repeat center center scroll;
opacity:0.7;

那么,问题来了,IE6-IE8完全不支持 opacity,所以还得考虑一下 IE的滤镜

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

filter:(opactity=70)

因此上述方案改造如下

background-color:rgb(0,152,50);
opacity:0.7;
filter:alpha(opacity=70);
background:url(path/my_bg.jpg) no-repeat center center scroll;
opacity:0.7;
filter:alpha(opacity=70);

ososchina.demo.jpg ososchina.demo.jpg

注意:opacity或者alpha的值强调的是“不”透明度

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

开发实践

<html>
	<head>
		<meta charset="utf-8">
		<title>Opacity</title>
		<meta http-equiv="X-UA-Compatible" content="IE=7,chrome=1.0">

		<style type="text/css" rel="stylesheet">
			*{
				padding: 0px;
				margin:0px;
			}
			.mainbox{
				width: 200px;
				height: 200px;
				clear: both;
				overflow: hidden;
				margin: 100px auto 0px auto;
				background-color: #f06;
			}
			.sub-mainbox
			{
				width: 250px;
				height: 200px;
				margin: -50px auto 0px auto;
				border:1px solid white;
				border-radius: 5px;
				/**background-color:rgb(0,152,50);**/
				background:url(path/my_bg.jpg) no-repeat center center scroll;
				opacity: 0.7;
				filter:alpha(opacity=70);
			}
		</style>
	</head>
	<body>

		<div class="mainbox">
			
		</div>

		<div class="sub-mainbox">
			
		</div>

	</body>
</html>

 

 

try doing it;

© 著作权归作者所有

IamOkay

IamOkay

粉丝 200
博文 483
码字总数 403074
作品 0
海淀
程序员
私信 提问
加载中

评论(1)

DoubleView
DoubleView
挺不错的24
CSS 图像透明/不透明

使用CSS很容易创建透明的图像。 注意:CSS Opacity属性是W3C的CSS3建议的一部分。 更多实例 创建透明图像 - 悬停效果 创建一个具有文本的拥有背景图像的透明框 实例1 - 创建一个透明图像 CS...

wybo521
2016/01/21
6
0
CSS实现HTML元素透明的那些事

CSS3草案中定义了来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性来实现的,所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用C...

^6^|^6^
2011/12/15
0
0
背景色半透明 兼容ie

在CSS中有一个Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不通范围的透明度。具体语法如下: {filter: alpha(opacity=opacity,finishopacity=finishop...

ForingY
2016/08/17
15
0
关于opacity、visibility、display属性的一道CSS面试题

说明 问题: 一个下拉菜单,结构如下, 鼠标移入div,显示菜单ul,移出后隐藏菜单ul,只使用CSS,如何实现既有淡入淡出的效果,而又不影响其他元素,不产生回流? 实现 这个问题,看上去似乎...

FEWY
2017/05/24
0
0
鼠标移入/移出改变图片透明度_jQuery效果

浏览聚美优品的时候看到的这个效果,鼠标移入图片后,当前图为高亮,*图片为灰色显示,移出图片区域后,图片重新变为高亮。挺绕口的,直接上代码,大家预览看下就晓得了,这种效果貌似电商网...

rin9958
2016/06/24
100
0

没有更多内容

加载失败,请刷新页面

加载更多

日志相关---日志配置和过滤器

一、log4j日志简介 1.1、 Loggers 级别和介绍 Loggers组件在此系统中被分为八个级别:ALL、TRANCE、DEBUG、INFO、WARN、ERROR和FATAL、OFF。这八个级别是有顺序的, ##off表示关闭ALL < T...

spinachgit
3分钟前
1
0
六个面试题层层剖析——LongAddr原子类

并发编程面试题 (1)LongAddr的结构是怎样的? (2)当前线程应该访问Cell数组里面的哪一个Cell元素? (3)如何初始化Cell数组? (4)Cell数组如何扩容? (5)线程访问分配的Cell元素有冲...

须臾之余
4分钟前
1
0
MySQL-入门(二)

本部分主要是MySQL的常用函数和高级用法。 一、MySQL排序 排序关键字:order by 排序字段。后面写上要排序字段,排序字段可以有多个,多个采用逗号间隔,order by默认采用升序(asc)排序,可...

潜行-L
15分钟前
0
0
BAM转VCF的方法对比

1 使用GATK HaplotypeCaller #java -jar gatk.jar HaplotypeCaller --native-pair-hmm-threads 4 -R xx.fa -I xx.bam -O xx.vcf --native-pair-hmm-threads用来设置多线程,默认为4线程 2 sa......

悲催的古灵武士
23分钟前
0
0
软件架构设计原则之“KISS”的总结使用

今天聊一聊软件架构设计中的 KISS 原则。 对! 就是亲嘴的那个 “KISS”! 一定要多练习。 ... ... ... ... 作为一个程序员我是推荐理解为“亲嘴”的,可以很好的解决单身问题,但作为一个架...

Owen_Jia
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部