线性渐变语法无法理解 [重复]答案

【问题标题】：Linear Gradients syntax not able to understand [duplicate]线性渐变语法无法理解 [重复]
【发布时间】：2019-12-30 07:28:44
【问题描述】：

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

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

【问题讨论】：

这能回答你的问题吗？ How do I combine a background-image and CSS3 gradient on the same element?

标签： css user-interface background-image linear-gradients

【解决方案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');

}

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

eg : background-image: linear-gradient(red, yellow), url(image_url);

由于您的两个值相同，因此它是纯色。

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

【讨论】：