线性渐变背景图像未显示

Question

尽管我插入了图像，但它根本没有显示。此外，当我使用浏览器检查工具时，它显示图像在那里，但浏览器没有显示。

background-image: linear-gradient(to right bottom, #0783fe, #7ed56f), url(../img/hero.jpg);

Answer 1

有几种方法或途径可以实现输出我一一列出

使用背景混合模式属性

background-blend-mode: lighten;

您可以根据您正在寻找的设计更改值

使用 rgba 值而不是 HEX 值来定义渐变颜色

background-image: linear-gradient(to right bottom, rgba(7, 131, 254, 0.5),rgba(126, 213, 111, 0.5)), url(./image.png);

a 值用于 alpha 或不透明度，范围在 0 到 1 之间

您可以向十六进制代码添加其他值

background-image: linear-gradient(to right bottom, #0783fe5b, #7ed56f5b), url("./CodeChefBadge.png");

同rgba“5b”代表颜色的不透明度

先放置图片

background-image: url("./CodeChefBadge.png"),linear-gradient(to right bottom, #0783fe, #7ed56f);

问题的出现首先是由于在图像上应用了线性渐变。并且由于您没有指定颜色的不透明度或强度，因此图像被隐藏。您可以尝试以下一些方法，看看哪种方法最适合您。希望回答对您有帮助。