opacity与rgba的区别

由图片所示,可清楚的看出rgba 与opacity的区别

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
		.content{
			clear: both;
		}
		.content li{
			list-style: none;
			float: left;
			margin: 10px;
			background-color: red;
			width: 30px;
			height: 30px;
			text-align: center;
		}
		.opacity li:nth-child(1){opacity: 1}
		.opacity li:nth-child(2){opacity: 0.8}
		.opacity li:nth-child(3){opacity: 0.6}
		.opacity li:nth-child(4){opacity: 0.4}
		.opacity li:nth-child(5){opacity: 0.2}

		.rgba li:nth-child(1){background-color: rgba(255,0,0,1)}
		.rgba li:nth-child(2){background-color: rgba(255,0,0,0.8)}
		.rgba li:nth-child(3){background-color: rgba(255,0,0,0.6)}
		.rgba li:nth-child(4){background-color: rgba(255,0,0,0.4)}
		.rgba li:nth-child(5){background-color: rgba(255,0,0,0.2)}
	</style>
</head>
<body>
	<div class="content opacity">
		<ul>
			<li>1</li>
			<li>0.8</li>
			<li>0.6</li>
			<li>0.4</li>
			<li>0.2</li>
		</ul>
	</div>
	<div class="content rgba">
		<ul>
			<li>1</li>
			<li>0.8</li>
			<li>0.6</li>
			<li>0.4</li>
			<li>0.2</li>
		</ul>
	</div>
</body>
</html>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页