92.构建合作伙伴的部分

上节课我们完成了工作流程的部分

● 这节课我们将展示产品的特色宣传，首先把这部分的标题和图片通过html展现

如下展示

● 接下来，还是一样，设置一下字体样式

.section-featured {
  padding: 4.8rem 0;
}

.heading-featured-in {
  font-size: 1.8rem;
  letter-spacing: 0.75px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2.4rem;
}

● 之后我们设置图片，很明显，这里我们需要使用到flexbox

.logos {
  display: flex;
  justify-content: space-around;
}

.logos img {
  height: 3.2rem;
}

● 但是这里品牌的颜色太鲜艳了，我们可以使用过滤使其统一颜色，因为这里我们并不像太过于突出

.logos img {
  height: 3.2rem;
  filter: grayscale(100%);

}

● 但是这个颜色仍然很混乱，有的特别黑，有的特别灰色，我们需要通过调整亮度的方式来解决这个问题

.logos img {
  height: 3.2rem;
  filter: brightness(0)

}

● 这样它就全部变为黑色了，我们还可以通过透明图让这些logo变得暗一点

.logos img {
  height: 3.2rem;
  filter: brightness(0);
  opacity: 50%;

}

● 这样似乎好很多！