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背景不起作用

1 个答案: