Question

我在CSS中有以下用于背景的属性。

background: linear-gradient(35deg, rgba(56, 114, 169, 1) 0%, rgba(16, 36, 57, 1) 58%);

我要查看的网页是https://dg2-dev-eu-dg2-web-user-portal.apps-dev.chdc20-cf.solera.com/privacy?app=dg&v=1.0.0&lang=en。

它可以在android上的Firefox中完美呈现，但不能在Chrome上运行。有人可以告诉我我做错了什么吗？

编辑：刚刚意识到，如果手机在横向方向上可以使用，但是在纵向模式下无法使用...

Answer 1

在使用渐变时，跨浏览器兼容性是一个问题，因此您必须包括所有浏览器的兼容性，希望这会有所帮助

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>

<body style="
    background:-webkit-linear-gradient(35deg, rgba(56, 114, 169, 1) 0%, rgba(16, 36, 57, 1) 58%);
    background:-moz-linear-gradient(35deg, rgba(56, 114, 169, 1) 0%, rgba(16, 36, 57, 1) 58%);
    background:-o-linear-gradient(35deg, rgba(56, 114, 169, 1) 0%, rgba(16, 36, 57, 1) 58%);
    background:-ms-linear-gradient(35deg, rgba(56, 114, 169, 1) 0%, rgba(16, 36, 57, 1) 58%);">

</body>
</html>

这里的Webkit是chrome的，moz是Mozilla的，o是Opera的，ms是MS Explorer的

线性渐变（作为背景）不适用于Chrome（android）

1 个答案: