Question

已经解决：Multiple backgrounds on top of each other (Normal, Streched, Normal)

我目前正在为一个学校项目的网站工作，我面临着不同屏幕分辨率的问题。我的网站在我的15.6＆＃34;笔记本电脑在正常分辨率下，但是一旦我开始缩小，居中的表格元素对于背景图像来说太长了，因为它具有固定的大小并且不能与表格一起拉伸。我的第一个想法是将背景图像分成3个部分，仅拉伸中间部分。有没有人有一个更优雅的解决方案，如果没有，有关如何在HTML中实现这一点的想法？

正常：http://www11.pic-upload.de/26.12.14/opay2lxe63et.png
放大：http://www11.pic-upload.de/26.12.14/cnrvvumqfcm.png

HTML：

<div id="content">
<table>
<colgroup>
    <col width="100">
    <col width="300">
    <col width="200">
</colgroup>
<tr>
    <td><b>Episode</b></td>
    <td><b>Title</b></td>
    <td><b>Available Hoster</b></td>
</tr><tr>
    <td>01</td>
    <td>Rebirth</td>
    <td>-</td>
</tr><tr>
    <td>02</td>
    <td>Confrontation</td>
    <td>-</td>
</tr><tr>
    <td>36</td>
    <td>January 28</td>
    <td>-</td>
</tr><tr>
    <td>37</td>
    <td>New World</td>
    <td>-</td>
</tr></table></div>

CSS：

#content{
    width: 1024px;
    height: 950px;
    background: url(img/content_background.png) no-repeat;
    display: table-cell;
    vertical-align: middle;
}

#content table{
    border-collapse:collapse;
    color: white;
    margin: auto;
}

#content td{
    border: 1px solid white;
    text-align: center;
}

Answer 1

请在您的css中使用background-size : 100%;

Answer 2

在背景中不要只使用1张图片。根据您的要求切片图像并再次使用它。（例如，使用顶部横幅图像分隔和底部角图标单独图像和边框使用css边框）

表太长了背景图像在不同的分辨率

2 个答案: