Question

是否可以将一个图像用于背景，另外两个用于左侧和右侧？我知道这可以使用某种表格，但我希望这是可扩展的。

header {background-image: x.jpg left(y.jpg) right(z.jpg);}

这样的事情是否存在？

使用表格，我认为这样的事情是可能的：

<td background="x.jpg">Left side</td>
<td background="y.jpg">Center, title.</td>
<td background="z.jpg">Right side</td>

Answer 1

您可以将单个背景（可能是图像）应用于单个元素。

如果你想要三个背景，你需要三个元素，如果你想要这些元素并排出现，那么你必须将它们并排放置（这可以通过多种方式完成）。您可以使用background-position进一步操纵元素背景的位置，因为背景的对齐完全独立。

这适用于表的onyl原因（除非表的内容实际上是表格数据，否则你应该像瘟疫一样避免这种原因）是因为你有三个元素。

Answer 2

多个背景图像即将到来，你现在可以做的数量有限，对CSS3 border-image有什么支持，但目前没有好的，simgle元素，跨浏览器的方式做到这一点。

Answer 3

这对我有用：

#hb-header {
height: 64px;
vertical-align: middle;
}
#hb-header .headleft {
float: left;
width: 64px;
height: 100%;
background-image: url('HeaderLogoLeft.png');
background-repeat: no-repeat;
background-position: 0 0;
}
#hb-header .headcenter {
height: 100%;
}
#hb-header .headright {
float: right;
height: 100%;
background-image: url('HeaderLogoRight.png');
background-repeat: no-repeat;
background-position: right;
}


<div id='hb-header' class='hb-header ui-widget-header ui-corner-all'>
    <div class='headleft'></div>
    <div class='headright'>
        <div style='margin-right: 72px;'>
            Version ${buildNumber}
            <div id='login' style='display:none;'><span id='login-user'></span> 
                <button type='button' id='logout' onclick="logout();" style='font-size:70%; line-height:1.0; padding:0.25em;'>Sign Out</button>
            </div>
        </div>
    </div>
    <div class='headcenter'>
        <h3 style='margin-left:72px;'>Hello World</h3>
    </div>
</div>

CSS中的左右背景图像

3 个答案: