时间戳

首页 > 解决方案 > 在 CSS 中使用具有线性渐变属性的 3 种颜色

css - 在 CSS 中使用具有线性渐变属性的 3 种颜色

问题描述

我想在下面的 CSS 中得到这个结果

在此处输入图像描述

有 3 种背景颜色。灰色、深灰色和黑色。在查看谷歌时，我必须使用该属性linear-gradient，但我不知道如何获得我的示例中的结果。

我被困住了，我现在有这个

background-image: linear-gradient(grey, black);


body{
  padding: 0;
  margin: 0;
}

.wrapper{
  display: flex;
}

.background-wrapper{
  padding: 10px 10px 0px 10px;
  width: 290px;
  height: 170px;
  background-image: linear-gradient(grey, black);
  color: white;
  text-align: center;
}

.img-box{
  position: relative;
  top: 10px;
}

.title{
  font-size: 24px;
  margin-top: 10px;
  color: white;
}

.text{
  font-size: 14px;
  color:white;
  margin: 20px;
}
<div class="wrapper">
      <div class="background-wrapper">
        <img class="img-box" src="https://zupimages.net/up/20/13/qjqq.png" alt="img-01">
        <div class="title">Planning & Strategy</div>
        <div class="text">a major breakthrough that we provide to our investors. and with a great marketing strategy.</div>
      </div>

      <div class="background-wrapper">
        <img class="img-box" src="https://zupimages.net/up/20/13/zsrk.png">
        <div class="title">Planning & Strategy</div>
        <div class="text">a major breakthrough that we provide to our investors. and with a great marketing strategy.</div>
      </div>

       <div class="background-wrapper">
        <img class="img-box" src="https://zupimages.net/up/20/13/gw1j.png">
        <div class="title">Planning & Strategy</div>
        <div class="text">a major breakthrough that we provide to our investors. and with a great marketing strategy.</div>
      </div>


    </div>

标签： css

解决方案

只需为每个 .background-wrapper div 添加一些特定的类。或者可以这样做：

.background-wrapper:nth-child(1) {background-color: #5a5a5a;}
.background-wrapper:nth-child(2) {background-color: #4a4a4a;}
.background-wrapper:nth-child(3) {background-color: #3e3e3e;}

并删除

background-image: linear-gradient(grey, black);

推荐阅读