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

根据this answer，这应该工作：背景图像和复杂的渐变Chrome移动

#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%); 
}

它不工作，虽然，只有图像是可见的。

经过几次刷新，我注意到渐变首先加载，然后在它的顶部的图像。我怎样才能使背景图像上的半透明渐变？

来源

2017-06-14 Scott Beeson

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

来源

2017-06-14 15:52:25

即使使用我的动态大小的元素，它也可以工作。谢谢！ –

我确实发现了这个问题。即使我将渐变设置为不透明度为1，仍然可以看到它背后的图像。有没有办法解决这个问题？ –

它的工作原理与photoshop中的图层完全相同。如果你的渐变是不透明的，你使用'叠加'，你将看不到图像，因为它上面有100％的不透明渐变。这真的取决于你的工作颜色。看看可用的财产选项，并尝试找到最适合您的需求 - https://www.w3schools.com/cssref/pr_background-blend-mode.asp –

使用: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>

来源

2017-06-14 15:36:51

显然，这工作，但它不适合我。唯一的区别是，我的元素通过javascript调整大小，而不是在CSS中静态大小。这可能是问题吗？ –

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

回答

相关问题