Question

无法使用渐变和图像。

这有效：

background: red url("/Style Library/Images/Recurr.png") center no-repeat

这不起作用：

background: linear-gradient(black, white) url("/Style Library/Images/Recurr.png") center no-repeat

如何使用渐变和图像。

Answer 1

你可以使用它。

见：

background: #6cab26;
background-image: url(/Style Library/Images/Recurr.png); /* fallback */
background-image: url(/Style Library/Images/Recurr.png), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */

Answer 2

关键是使用背景图像作为图像，背景使用渐变。

我已为其他浏览器添加了裁员。

.Blue{
    background:#47b; /* Old browsers */
    background:-webkit-linear-gradient(top,#47b 0%,#249 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top,#47b 0%,#249 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top,#47b 0%,#249 100%); /* IE10+ */
    background:linear-gradient(to bottom,#47b 0%,#249 100%); /* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477bb',endColorstr='#224499',GradientType=0); /* IE6-9 */

    background-image: url("/Style Library/Images/Recurr.png") center no-repeat;
}

无法在CSS中使用渐变和图像

2 个答案: