如何在css/react中添加线性梯度？

Question

如何在这一节中添加三个斜线渐变，第一个梯度左上角，其余渐变则在下一个渐变后进行？

<section id='product'>

                <div className="container">
                    <div className="row justify-content-center">
                        <div className="col-md-8 mt-5">
                            <h1 className="display-4 fw-bolder mb-4 text-center text-white" style={{fontFamily: "Brush Script MT, Brush Script Std, cursive",display: 'flex',  justifyContent:'center', alignItems:'center', height: '45vh'}}>Coming Soon</h1>
                            {/* <p className="lead text-center fs-4 mb-5 text-white" style={}  >Coming Soon</p> */}
                            <div className='buttons d-flex justify-content-center'>
                                {/* <button className='btn btn-outline-primary rounded-pill px-4 py-2 ms-2'>Learn More</button>
                        <button className='btn btn-outline-primary rounded-pill px-4 py-2 ms-2'>Buy Now</button> */}
                            </div>
                        </div>
                    </div>
                </div>

            </section>

css：

#product{
  background: #00FFFF;
  background:
    linear-gradient(118deg,#0000FF .001%,#00FFFF 100%);

  min-height: 500px;

}

Answer 1

我建议在使用不透明时使用rgba或hsl。简单地添加三种颜色并使用to right bottom定义方向

​

#product {
  background: #00FFFF;
  background: linear-gradient(to right bottom, rgba(0, 0, 255, 0.8), rgba(0, 255, 255, 0.7), rgba(255, 0, 255, 0.4));
  min-height: 500px;
}

<section id='product'></section>

​

Answer 2

您可以使用CSS来完成它。在这个链接中，您了解了线性梯度：https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient的所有知识。