Chrome移动背景图像和复杂渐变

Question

根据this answer，这应该有效：

#shop {
    background-image: url('../images/tilecovers/shop.jpg'),
    linear-gradient(
            135deg,
            rgba(228,245,252,0.18) 0%,
            rgba(191,232,249,0.2) 49%,
            rgba(191,232,249,0.21) 65%,
            rgba(159,216,239,0.21) 73%,
            rgba(82,189,236,0.22) 100%); 
}

虽然不起作用，但只有图像可见。

经过几次刷新后，我注意到渐变首先加载，然后是顶部的图像。如何在背景图像上制作半透明渐变？

Answer 1

使用:before应用过滤器。 像这样：

#shop {
  width: 350px;
  height: 150px;
  background: url("http://via.placeholder.com/350x150") center center no-repeat;
}
#shop:before {
  width: 350px;
  height: 150px;
  content: '';
  position: absolute;
  background-image: linear-gradient( 
      135deg,
            rgba(228,245,252,0.18) 0%,
            rgba(191,232,249,0.2) 49%,
            rgba(191,232,249,0.21) 65%,
            rgba(159,216,239,0.21) 73%,
            rgba(82,189,236,0.22) 100%
  );
}

<div id="shop">
</div>

Answer 2

不确定cross browser support，但有一个选项正在使用background-blend-mode属性，如下所示：

.shop {
  background-image: url('https://placeholdit.co//i/500x250?bg=111111'),
linear-gradient(
        135deg,
        rgba(228,245,252,0.18) 0%,
        rgba(191,232,249,0.2) 49%,
        rgba(191,232,249,0.21) 65%,
        rgba(159,216,239,0.21) 73%,
        rgba(82,189,236,0.22) 100%);
  background-blend-mode: overlay;
  width: 500px;
  height: 250px;
}

.shop-no-gradient {
  background-image: url('https://placeholdit.co//i/500x250?bg=111111');
  width: 500px;
  height: 250px;
}

<div class="shop"></div>
<br>
<div class="shop-no-gradient"></div>