Question

我正在创建一个Web应用程序以学习Web开发，但是遇到了一个我似乎无法用Google搜索的问题。

这是一个面向移动的应用程序。我想将其创建为webapp，因为我已经为html，css和js奠定了相当不错的基础，并且我喜欢简单的交叉兼容性。

理想情况下，Android或iOS用户至少可以在chrome中使用它，但是，它的主要部分无法在iOS中显示，并且我没有iPhone来进行反复试验。我敢打赌，这是一个非常简单的问题，我只是不知道自己在做什么，所以我希望有人可以帮助我。

我的Web应用程序有16个部分，它们在8x2网格中排列。这些列代表一对匹配的对象，应该共享一个背景层linear-gradient(to right,${bkgcolor})的相同内容，其中bkgcolor是jquery中生成的颜色列表。另一层只是使用linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0) 75%,rgba(10,10,10))在顶部附近的底部附近向黑色添加渐变（底部行具有相同的颜色，但是倒置以使顶部更暗。）

我为jquery中的所有部分设置了颜色：

$('#'+this.id).css("background",`linear-gradient(to right,${bkgcolor}),linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0) 75%,rgba(10,10,10))`);
    $('#'+this.id).css("background",`-webkit-linear-gradient(to right,${bkgcolor}),-webkit-linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0) 75%,rgba(10,10,10))`);
    $('#'+this.id).css("background",`-moz-linear-gradient(to right,${bkgcolor}),-moz-linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0) 75%,rgba(10,10,10))`);
    $('#'+this.id).css("background",`-o-linear-gradient(to right,${bkgcolor}),-o-linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0) 75%,rgba(10,10,10))`);
    $('#'+this.id).css("background",`-ms-linear-gradient(to right,${bkgcolor}),-ms-linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0) 75%,rgba(10,10,10))`);

为了使透明至黑色层覆盖可变颜色层，我对元素使用了以下css。

[class="tap manact"] {
  border-top-right-radius: .5em;
  border-top-left-radius: .5em;
  position: relative;
  z-index: 1;
  background-blend-mode: multiply;
  background-attachment: fixed;
}

实际上，它在Windows和Android上都可以很好地工作，但是颜色在ios中无法显示，这使得该Web应用几乎无法使用。

我感觉这是Webkit引起的问题，但是我试图通过在背景中添加每个浏览器渐变来解决此问题。

Here is a link to my website

只需单击侧栏上的X，您将看到我在谈论的部分（如果您使用PC或android）。（在iOS上一切都是黑色的），其想法是选择和取消选择侧栏中的图标会更改它们所在的插槽（列）的颜色。

我在做什么错了？

混合背景未在iOS上显示

0 个答案: