将背景图片与rgba颜色组合，但不使用渐变效果

Question

3

是否有可能在不使用rgba渐变的情况下将背景图像与rgba颜色组合起来？

目前，我的CSS3样式如下：

html
{
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    url("../icons/sombrero.jpg")no-repeat center center fixed;
}

但是我想象的是这样的：

html
{
    background:rgba(0, 0, 0, 0.75),
    url("../icons/sombrero.jpg")no-repeat center center fixed;
}

rgba颜色应该放在图片上面。我从这里获得了渐变“hack”：这里。我正在寻找一种替代渐变技术的方法，而不是使用box-shadow技巧。

- dargmuesli

2

@yak613 这是因为你无法在背景图像上放置背景颜色。渐变工作的原因是因为它被呈现为背景图像 :D - Jacob G

即使在CSS3中，仍然需要使用这些“hack”来执行如此简单的任务，这让我感到很烦恼。使用我的第二个示例会更方便和合理，不是吗？ - dargmuesli

可能是CSS颜色背景覆盖图片的重复问题。 - Jacob G

@Paulie_D 不行，因为在我的情况下无法将主体的宽度和高度设置为100%。 - dargmuesli

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Paulie_D

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vals · Accepted Answer

将来可能会成为可能。

来自w3c草案：

例如，可以使用这种方法作为一种简单的方式来“着色”背景图片，通过在另一张图片的顶部覆盖部分透明的颜色：

background-image: image(rgba(0,0,255,.5)), url("bg-image.png");

对于这种情况，background-color无法使用，因为它生成的纯色始终位于所有背景图像下方。