css - 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

不确定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>