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

CSS的多个背景

1 个答案: