①CSS测试三基色融合测试是否能得到新颜色（白、黄、橙等）；②CSS赋值英文red、green、blue与三基色RGB对应测试

一、测试能否实现三原色合出新色（方法是：透明度+堆叠）

(很明显，行不通，难道我方法错了?)
在这里插入图片描述

二、测试赋值英文red、green、blue与三基色RGB是否对应

在这里插入图片描述

代码：（不含兼容）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">

body { padding: 0; margin: 0;}

.wrap { width: 200px; height: 200px; float: left; margin: 100px;}

.box { width: 200px; height: 200px; font-size: 20px; text-align: center; line-height: 200px; color: #fff;}

/*test1*/
.color-red { background: red; opacity: 0.5;}

.color-green { background: green; opacity: 0.5; margin-top: -150px; margin-left: 50px;}

.color-blue { background: blue; opacity: 0.5; margin-top: -150px; margin-left: 100px;}


.color-R { background: rgba(255, 0, 0, 0.5);}

.color-G { background: rgba(0, 255, 0, 0.5); margin-top: -150px; margin-left: 50px;}

.color-B { background: rgba(0, 0, 255, 0.5); margin-top: -150px; margin-left: 100px;}

/*test2*/
.container { float: left; margin-left: 100px;}

.battle { float: left;}

.red { background: red;}
.R { background: rgb(255, 0, 0);}

.green { background: green;}
.G { background: rgb(0, 255, 0);}

.blue { background: blue;}
.B { background: rgb(0, 0, 255); }
</style>
</head>

<body>
	<div class="wrap">
		<p>red、green、blue<br />+opacity透明</p>
		<div class="box color-red"></div>
		<div class="box color-green"></div>
		<div class="box color-blue"></div>
	</div>
	<div class="wrap">
		<p>RGBA</p>
		<div class="box color-R"></div>
		<div class="box color-G"></div>
		<div class="box color-B"></div>
	</div>
	<div class="container">
		<p>英文单词赋值与RGB的对比（很明显，只有green与RGB不对应）</p>
		<div class="battle">
			<div class="box red">red</div>
			<div class="box R">rgb(255, 0, 0)</div>
		</div>
		<div class="battle">
			<div class="box green">green</div>
			<div class="box G">rgb(0, 255, 0)</div>
		</div>
		<div class="battle">
			<div class="box blue">blue</div>
			<div class="box B">rgb(0, 0, 255)</div>
		</div>
	</div>
</body>
</html>

来源：CSDN

作者：馬不停蹄

链接：https://blog.csdn.net/weixin_45389633/article/details/104182434

标签

background

三基色

margin

css