多个 css 背景不工作

Question

我正在尝试在 div 上使用 3 个背景。

.leftcontent
{
    padding: 0 20px;
    padding-bottom: 35px;
    width: 615px;
    margin-right: 30px;
    background:
        url('../images/primary_content_bottom_item31.gif') bottom left no-repeat,
        url('../images/primary_content_bg.gif') repeat-y,
        url('../images/primary_content_bg2.gif') top left no-repeat;
}
.left
{
    float: left;
}

问题是primary_content_bg2.gif背景图片不显示。

但是，当我删除前 2 个背景（primary_content_bottom_item31.gif 和 primary_content_bg.gif）时它会显示。

这是我的 HTML:

<div class='left leftcontent'>
    <h1>Lottery</h1>
    <p>The Brookvale Lottery was set up in 1976 to help raise money for the building of our Village Hall. Today, the lottery raises funds for the day to day running and upkeep of the Hall. In 2012, as well as paying out to Brookvale residents, it also paid for the purchase and installation of security fencing at the Hall.</p>
    <p>The Lottery is open to all residents of Brookvale over 16.</p>
    <h2 class=center><strong>1st Prize - &pound;50</strong></h2>
    <h2 class=center><strong>2nd Prize - &pound;30</strong></h2>
    <h2 class=center><strong>3rd Prize - &pound;20</strong></h2>
    <p>To find out how the lottery works, see Rules of Play.</p>
</div>

Answer 1

您定义的第二个背景显示在最后一个背景之上。这应该有效：

background:
    url('../images/primary_content_bottom_item31.gif') bottom left no-repeat,
    url('../images/primary_content_bg2.gif') top left no-repeat,
    url('../images/primary_content_bg.gif') repeat-y;

定义图像的顺序就是图像的显示顺序。先定义的显示在后定义的上方。

多个 css 背景不工作

multiple css backgrounds not working

css

background-image