实现背景半透明的方法及兼容解决方案

最新推荐文章于 2023-03-13 16:11:59 发布

c-Tomorrow

最新推荐文章于 2023-03-13 16:11:59 发布

阅读量755

点赞数 1

分类专栏： css、css3 文章标签：定义半透明的方法定义透明IE兼容性问题

本文链接：https://blog.csdn.net/c__dreamer/article/details/80470854

版权

css、css3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

现在的CSS3有很多种实现半透明的方法，如：

CSS3新增的rgba（）或者hsla（）色彩值实现。

CSS的opacity属性也可以实现

针对老板本IE浏览器可以通过alpha实现（这个等下说）。

opacity

用来定义一个元素的透明级别，值介于0.0（完全透明）到1.0（完全不透明）之间。

兼容性很好，主流浏览器都支持（IE8以下不支持，需要用IE的alpha滤镜代替）。

使用这个透明度会延伸到子级。

前面说了RGBA不懂得点击这里。

RGBA和opacity都是和透明度有关，它们有什么区别？？？

关于alpha透明的参数值范围都是在（0-1）之间的。

rgba（）是属性的值，opacity是属性。

rgba（）针对使用该值的当前属性。opacity则针对使用该属性的元素。

rgba（）作用于元素本身的当前属性，不影响其他；opacity作用于整个元素且包含子元素。

IE兼容性透明色

filter:progid:DXtmageTransform.Microsoft.gradient(startcolor=#80000000,endcolorstr=#80000000);
filter:alpha(opacity:80);

第二个应该很好理解，也比较常用作兼容，第一个前面那么多到gradient都是不变的模板，后面gradient是渐变，括号里面的是渐变的开始颜色，到结束颜色。颜色十六进制代码的前两位代表透明程度（00-FF）。因为只是透明色，并不用到渐变，所以开始颜色和结束颜色一样。

.div1{
	width:300px;
	height:200px;
	margin:10px auto;
	position:relative;
}
.div1 img{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
.div1 .info{
	width:100%;
	height:80px;
	position:relative;
	top:120px;
	left:0;
	z-index:2;
	background-color:rgba(0,0,0,0.5);
	filter:progid:DXtmageTransform.Microsoft.gradient(startcolor=#80000000,endcolorstr=#80000000);
	filter:alpha(opacity=80);
}
.div1 .info h3{
	color:#fff;
	font-size:17px;
}
.div1 .info p{
	color:#ccc;
	font-size:12px;
}
.div1 .info button{
	position:absolute;
	bottom:5px;
	left:10px;
	width:60px;
	height:25px;
	background-color:hsl(220,100%,65%);
	/*border:0;*/
	border-radius:5px;
	box-shadow:0 0 5px black;
	color:#fff;
	font-size:12px;
	cursor:pointer;
}
	</style>
</head>
<body>
	<div class="div1">
		<img src="../../image/1.jpg">
		<div class="info">
			<h3> <小猫>这里呈现图文图标专题...</h3>
			<p>130万次播放 20万次评论</p>
			<button>立即播放</button>
		</div>
	</div>
</body>

--主页传送门--

c-Tomorrow

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现背景半透明的方法及兼容解决方案

现在的CSS3有很多种实现半透明的方法，如： CSS3新增的rgba（）或者hsla（）色彩值实现。 CSS的opacity属性也可以实现针对老板本IE浏览器可以通过alpha实现（这个等下说）。 opacity 用来定义一个元素的透明级别，值介于...
复制链接

扫一扫