Question

我想将图像作为背景，还有CSS线性渐变：

background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);

我不会遇到桌面浏览器（Firefox 44.x; IE 10; Chrome; Safari）的问题，但不适用于移动浏览器（我用iphone 5测试，（9.x）使用safari，app firefox，app chrome）。

我用这个：

background-image: url("/site/grigliatrasparente.png"), -moz-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -o-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -ms-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#404040), color-stop(2%,#dfbb80),color-stop(98%,#dfbb80),color-stop(100%,#404040));
background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#404040, endColorstr=#dfbb80);
background-color: #dfbb80;

有什么问题？

非常感谢并抱歉我的英语：）

Answer 1

在CSS3的多个背景的早期阶段，问题在于渐变取代了背景img，但事情得到了解决，在mozilla-developer你可以找到一个像你的想法一样的例子工作得很好，也很流动。
你的css看起来很好，虽然你可以通过autoprefixr来运行它来更新前缀在考虑可能其中一个前缀扰乱您的显示之前，请先用手机检查功能示例（当然还有css），并为背景图像设置背景重复和背景位置。

Answer 2

检查jsfiddle链接下方。在我的例子中，非前缀线性渐变已经校正到最后一个语法:(在这种情况下使用＆＃39;到......＆＃39;用于方向）

open

https://jsfiddle.net/3u2Lhx6k/

更详细的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient。

浏览器移动的线性渐变和网址图片？

2 个答案: