Css Chrome mobile上的背景图像和复梯度

据认为，这应该是可行的：

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

但它不起作用，只有图像可见

---

几次刷新后，我注意到渐变首先被加载，然后是图像。如何在背景图像顶部设置半透明渐变？

使用

：before

应用过滤器。 像这样：

#商店{
宽度：350px；
高度：150像素；
背景：url（“http://via.placeholder.com/350x150）居中不重复；
}
#商店：以前{
宽度：350px；
高度：150像素；
内容：''；
位置：绝对位置；
背景图像：线性渐变（
135度，
rgba（228245252,0.18）0%，
rgba（191232249,0.2）49%，
rgba（191232249,0.21）65%，
rgba（159216239,0.21）73%，
rgba（82189236,0.22）100%
);
}

---

使用

:before

应用过滤器。 像这样：

#商店{
宽度：350px；
高度：150像素；
背景：url（“http://via.placeholder.com/350x150）居中不重复；
}
#商店：以前{
宽度：350px；
高度：150像素；
内容：''；
位置：绝对位置；
背景图像：线性渐变（
135度，
rgba（228245252,0.18）0%，
rgba（191232249,0.2）49%，
rgba（191232249,0.21）65%，
rgba（159216239,0.21）73%，
rgba（82189236,0.22）100%
);
}

不确定，但有一个选项是使用

背景混合模式

属性，如下所示：

.shop{
背景图像：url（'https://placeholdit.co//i/500x250?bg=111111'),
线性梯度(
135度，
rgba（228245252,0.18）0%，
rgba（191232249,0.2）49%，
rgba（191232249,0.21）65%，
rgba（159216239,0.21）73%，
rgba（82189236,0.22）100%；
背景混合模式：叠加；
宽度：500px；
高度：250px；
}
1.店铺没有坡度{
背景图像：url（'https://placeholdit.co//i/500x250?bg=111111');
宽度：500px；
高度：250px；
}

不确定，但有一个选项是使用

背景混合模式

属性，如下所示：

.shop{
背景图像：url（'https://placeholdit.co//i/500x250?bg=111111'),
线性梯度(
135度，
rgba（228245252,0.18）0%，
rgba（191232249,0.2）49%，
rgba（191232249,0.21）65%，
rgba（159216239,0.21）73%，
rgba（82189236,0.22）100%；
背景混合模式：叠加；
宽度：500px；
高度：250px；
}
1.店铺没有坡度{
背景图像：url（'https://placeholdit.co//i/500x250?bg=111111');
宽度：500px；
高度：250px；
}

显然这是可行的，但对我来说不可行。唯一的区别是我的元素是通过javascript调整大小的，而不是在CSS中静态调整大小。这可能是问题所在吗？显然这是可行的，但对我来说不起作用。唯一的区别是我的元素是通过javascript调整大小的，而不是在CSS中静态调整大小。这可能是问题所在吗？即使是动态大小的元素，这也能起作用。谢谢我确实发现了一个问题。即使我将渐变设置为不透明度1，您仍然可以看到它后面的图像。有没有办法解决这个问题？它的工作原理和photoshop中的图层完全一样。如果你的渐变是不透明的，你使用“叠加”，你将看不到图像，因为它上面有一个100%不透明的渐变。这实际上取决于您使用的颜色。查看可用于该属性的选项，并尝试找到最适合您需要的选项-如果答案不能回答您的问题，请随意取消选择答案。如果问题未解决，您将获得更多尝试和答案。RE:100%不透明，请查看此提琴：即使使用动态大小的元素，此选项也有效。谢谢我确实发现了一个问题。即使我将渐变设置为不透明度1，您仍然可以看到它后面的图像。有没有办法解决这个问题？它的工作原理和photoshop中的图层完全一样。如果你的渐变是不透明的，你使用“叠加”，你将看不到图像，因为它上面有一个100%不透明的渐变。这实际上取决于您使用的颜色。查看酒店的可用选项，并尝试找到最适合您需要的选项-如果答案不能回答您的问题，请随意取消选择答案。如果问题未解决，您将获得更多尝试和答案。回复：100%不透明，请参阅此提琴：