css - 带有 CSS 的多个背景

Question

我尝试在 CSS 中创建具有自定义背景的元素，但只有一个背景可见。

#myElement  {
    background-image: -moz-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%), url('../img/custom-bg.png');
    background-image: -o-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%), url('../img/custom-bg.png');
    background-image: -webkit-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%), url('../img/custom-bg.png');
    background-image: linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%), url('../img/custom-bg.png');
}

当我在浏览器中打开它时#myElement只有渐变填充。它没有显示custom-bg.png

有人能帮忙吗？

Answer 1

看起来你的渐变在custom-bg.png图像上。尝试先移动url('../img/custom-bg.png')，然后放置渐变。

您的代码将如下所示：

#myElement  {
    background-image: url('../img/custom-bg.png'), -moz-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%);
    background-image: url('../img/custom-bg.png'), -o-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%);
    background-image: url('../img/custom-bg.png'), -webkit-linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%);
    background-image: url('../img/custom-bg.png'), linear-gradient(bottom, #727d9a -25%, #4b5263 10.3%, #3d4351 50%, #424856 50.37%, #767e90 91.16%, #d2dfff 125%);
}