线性渐变语法无法理解

Question

任何人都可以帮助背景图像和线性渐变的工作原理。我得到的是全彩色而不是图像。请解释它是如何工作的。?

background-image:linear-gradient(rgba(255, 0, 0, 0), rgba(255,0,0,0)),
     url(../img/background-img.jpeg);

Answer 1

Html

<div class='box'></div>

Css

.box{
  width:500px;
  height:500px;  
  background: #eb01a5;/*fallback*/
  background-image:url("https://images.pexels.com/photos/3370704/pexels-photo-3370704.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); /* fallback */  
  background-image:
linear-gradient(rgba(255, 0, 0, 0), rgba(217, 19, 93, 0.73)),
url('https://images.pexels.com/photos/3224164/pexels-photo-3224164.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');

}

在线性渐变中，第一个值是从哪个颜色开始，第二个值是结束颜色

例如：背景图像：线性渐变（红色，黄色），url（image_url）；

因为你的两个值相同，所以它是纯色。

注意：某些浏览器可能不支持背景图像线性渐变，因此最好有后备背景颜色和图像。

线性渐变语法无法理解

Linear Gradients syntax not able to understand

css

user-interface

background-image

linear-gradients