如何通过引导在背景图像中添加线性梯度？
如何通过引导在背景图像中添加线性梯度？
提问于 2022-10-30 13:46:38
，这是一个反应应用，.I想要添加一个线性梯度为0.7的背景图像与引导。但是怎么做？
<Carousel.Item>
<img className='banner-bg d-block w-100 bg-dark bg-gradient ' src='https://i.ibb.co/YQ8MmpM/hero-bg-1-1.jpg' ' />
<Carousel.Caption className='position-absolute top-0 start-0 text-start px-5 pt-5 mt-5 ms-5 '>
<h2 className='fw-bold display-4 px-5 '>
Get Your Amazing <br />
Car Solution
</h2>
<p className=' px-5'>Take payments online with a scalable platform that <br /> grows with your perfect business
</p>
<div className='lc-block d-grid gap-2 d-md-flex justify-content-md-start px-5'>
<a className='btn btn-danger px-4 me-md-2' href='#' role='button'>About Us</a>
<a className='btn btn-outline-secondary px-4' href='#' role='button'>Latest Projects</a>
</div>
</Carousel.Caption>
</Carousel.Item>
回答 1
Stack Overflow用户
发布于 2022-10-30 13:59:15
您所需要做的就是向元素中添加一个. be梯度类(一个线性梯度将作为背景图像添加到背景中)。
如果您想要添加自定义CSS类，只需添加以下一行:背景图像:var(-bs-梯度)；
您可以在React中使用下面的样式来瞄准引导梯度:style={ backgroundImage：linear-gradient( 170deg, var(--bs-gradient), 'navy' ) }}
或
将图像标记替换为以下标记：
linear-gradient(170deg,var(--bs-gradient),'navy')}className=‘banner d-块w-100 bg-暗bg-梯度’src='https://i.ibb.co/YQ8MmpM/hero-bg-1-1.jpg‘/>
如果以上代码有效，请根据需要更改线性梯度属性值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74253586
复制相关文章
相似问题
腾讯云开发者
