Question

所以我正在为课程分配工作，我必须在页面的section元素中添加三个背景。

其中一个是背景图片，我能够以正确的位置显示它。

另外两个是位于截面元素左边和底边的相同渐变。

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

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

attemps：

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; 
}

Answer 1

您应该一次声明所有内容，更像是：

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;
}

我需要在section元素中添加三个背景

1 个答案: