Question

我正在使用background和background-color来设置渐变背景。

如果我只写background，我可以看到渐变：

background: linear-gradient(35deg, #CCFFFF,#FFCCCC);

但是如果我写background-color，我看不到它：

background-color:linear-gradient(35deg, #CCFFFF,#FFCCCC);

可能是什么问题？

Answer 1

因为渐变类型的背景不是颜色，而是图像。

请参见以下示例：https://jsfiddle.net/jpavnk71/4/

HTML：

<div class="color">background-color:linear-gradient(35deg, #CCFFFF,#FFCCCC);</div>
<div class="wrong">background:linear-gradient(35deg, #CCFFFF,#FFCCCC);</div>
<div class="image">background-image:linear-gradient(35deg, #CCFFFF,#FFCCCC);</div>

CSS：

div{
  height:100px;
  line-height:100px
}
.wrong{background:linear-gradient(35deg,#CCFFFF,#FFCCCC);}
.color{background-color:linear-gradient(35deg,#CCFFFF,#FFCCCC);}
.image{background-image:linear-gradient(35deg,#FFCCCC,#CCFFFF);}

Answer 2

线性渐变的处理方式类似于图像，因此您可以编写：

background:linear-gradient(35deg, #CCFFFF,#FFCCCC);

OR

background-image:linear-gradient(35deg, #CCFFFF,#FFCCCC);

背景与背景色CSS

2 个答案: