css两个色块叠加

在CSS中，有时候我们需要将两个不同颜色的色块叠加在一起，以达到想要的效果。下面我们来看一下如何实现这个功能。

.block1 {
  background-color: red;
  width: 100px;
  height: 100px;
}
.block2 {
  background-color: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;  /*调整透明度*/
} 

上面的代码中，我们分别定义了两个色块，一个红色，一个蓝色。在block2中，我们加入了position: absolute属性，将其放置在block1的最上层；同时，我们还添加了opacity属性，调整了透明度。这样，在两个色块叠加在一起时，蓝色的区域就会和红色的区域重叠，从而呈现出不同的颜色。

要注意的是，如果我们没有为block1添加position属性，那么在block2悬浮在其上方时，block1会自动调整大小，导致出现意想不到的结果。因此，我们需要将block1的position属性设置为relative，以固定它的大小和位置。

最终，在HTML中，我们可以这样写：

<div class="block1"></div>
<div class="block2"></div> 

这样就可以将两个不同颜色的色块叠加在一起了！