Css 我想添加一个顶部和底部宽度可变的线性渐变

Css 我想添加一个顶部和底部宽度可变的线性渐变,css,linear-gradients,Css,Linear Gradients,所以我想把线性渐变应用到一张图片上,这样,它的顶部宽度为75%,底部宽度为35%。我环顾了一下四周,但似乎到目前为止运气不好 您可以使用2个线性渐变来完成此操作,如下所示 第一个渐变将以矩形填充至宽度的35%,然后第二个渐变将在第一个渐变以宽度的40%和三角形结束时开始,因此顶部为35%+40%=75%,底部为35%: .box{ 高度:300px; 背景: 线性梯度(至右下角,rgba(0180,0,0.7)50%,透明50.5%)钙(35%/0.6)0/40%100%无重复, 线性梯度(

所以我想把线性渐变应用到一张图片上,这样,它的顶部宽度为75%,底部宽度为35%。我环顾了一下四周,但似乎到目前为止运气不好


您可以使用2个线性渐变来完成此操作,如下所示

第一个渐变将以矩形填充至宽度的35%,然后第二个渐变将在第一个渐变以宽度的40%和三角形结束时开始,因此顶部为35%+40%=75%,底部为35%:

.box{
高度:300px;
背景:
线性梯度(至右下角,rgba(0180,0,0.7)50%,透明50.5%)钙(35%/0.6)0/40%100%无重复,
线性梯度(向右,rgba(0180,0,0.7),rgba(0180,0,0.7))0 0/35.05%100%无重复,
网址(https://lorempixel.com/1000/1000/)中心/盖不重复
}


希望您至少尝试自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些,或者通过谷歌,或者通过搜索,尝试一下。如果您仍然有问题,请返回代码并解释您尝试过的内容。@Mgkrish可能:)很有趣……您可能想解释这是如何工作的……以及为什么。。。鬼鬼祟祟的@Paulie_D我补充了更多的解释;)但第二个问题的立场仍然是个小问题,不是吗accurate@UdimManasseh代码中有什么您不理解的?当我用图形详细解释时:)出现了网络问题,所以我的页面没有重新加载。我已经看到了解释。