Html 我需要为section元素添加三个背景

所以我正在做一个课堂作业，我必须在页面的section元素中添加三个背景

其中一个是背景图像，我能够以正确的位置显示出来

其他两个是位于截面图元的左边缘和下边缘上的相同渐变

但是，当我尝试添加渐变代码时，它会尝试更改已经存在的背景图像的布局/颜色

如何在不覆盖图像的情况下将这些渐变添加到截面元素

调度：

section { 
background-image:url(corner.png); 
background-repeat:no-repeat; 
background-position:bottom left; 
background-image: 
linear-gradient(left bottom, rgba(170, 90, 27, 0.7), rgba(16, 77, 61, 0.7) 2%, rgba(255, 255, 255, 0.1) 5% ); 
background-position:left; 
background-image: linear-gradient(left bottom, rgba(170, 90, 27, 0.7), rgba(16, 77, 61, 0.7) 2%, rgba(255, 255, 255, 0.1) 5% ); background-position:bottom; 
} 

---

您应该同时声明所有内容，更像：

section { 
background-image:
  url(corner.png),    
  linear-gradient(to left bottom, rgba(170, 90, 27, 0.7), rgba(16, 77, 61, 0.7) 2%, rgba(255, 255, 255, 0.1) 5% ),
   linear-gradient(to left bottom, rgba(170, 90, 27, 0.7), rgba(16, 77, 61, 0.7) 2%, rgba(255, 255, 255, 0.1) 5% );
background-position:
  bottom left,
  left, 
  bottom;
background-repeat:no-repeat;
} 

---

用提琴或代码笔向我们展示尝试代码：）img和渐变将堆叠在背景中，通过重复、大小、位置也可以实现调整。{背景图像：url（corner.png）；背景重复：无重复；背景位置：左下；背景图像：线性渐变（左下，rgba（170，90，27，0.7），rgba（16,77,61,0.7）2%，rgba（255,255,255,0.1）5%；背景位置：左侧；背景图像：线性渐变（左下角，rgba（170,90,27,0.7），rgba（16,77,61,0.7）2%，rgba（255,255,255,0.1）5%）；背景位置：底部；}对不起，还是一个问题，有没有一种方法我需要格式化代码，使它看起来像是我的？我编辑了你的文章（编辑你自己，看看：），这只会使工作的corner.png图像消失。我基本上必须在角落里有corner.png图像（显然）渐变沿元素左侧垂直向下，渐变底部水平。更改顺序，使渐变不覆盖图像。有关更多准确信息，请参阅：#角{背景图像：url（corner.png）；背景重复：不重复；背景位置：左下；}左{背景图像：线性渐变（左下角，rgba（170，90，27，0.7），rgba（16，77，61，0.7）2%，rgba（255，255，255，0.1）5%）；背景位置：左侧；}底部{背景图像：线性渐变（左下角，rgba（170，90，27，0.7），rgba（16，77，61，0.7）2%，rgba（255，255，255，0.1）5%）；背景位置：底部；}这是我尝试使用div id来定义左、下和角的一次尝试，但它也没有任何作用。在原始代码中缺少：在线性梯度中的方向前面（左下角，…我得到了部分要显示的内容，但我需要元素左侧的一个像背景重复：repeat-y，底部的一个像repeat-x。我需要基本上两个相同的渐变，但我需要一个沿着左边缘，另一个穿过下边缘。