1

我有一个以我的页面为中心的固定高度和宽度的标题。从标题图像的每个边缘，我都拍摄了 1 px 的小图像，我希望在该宽度的记忆空间上重复这些图像。

无论如何，我的问题是我无法让小图像在标题周围重复。我首先尝试重复标题右侧的背景图像，但背景会跳到下一个“行”并在那里重复。当我添加在整个“行”上重复的左侧标题 bg 图像时，右侧标题图像位于其下方。

编辑-这里是 jsfiddle。希望它可以帮助您理解我的问题。 http://jsfiddle.net/kEdGb/

现在这里是html：

<div id="HeaderContainer">
    <div id="HeaderLeft"></div>
    <div id="Header">
        <div id="Menu">
            <ul class="tab">
                <li><a href="page.html">Link</a></li>

            </ul>
        </div>
    </div>
    <div id="HeaderRight"></div>
</div>

和CSS：

#HeaderContainer {
    width: 100%;     
}

#Header
{
    background-image: url(images/header_image.png);
    background-repeat: no-repeat;
    background-color: #707173;
    height: 210px;
    width: 990px;
    max-width: 990px;
    margin: 0px auto;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    position: relative;
    border-top-style: solid;
    border-top-color: #707173;
    border-top-width: 1px;
    border-left-style: solid;
    border-left-color: #707173;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-color: #707173;
    border-right-width: 1px;
}

#HeaderLeft {
    background-image: url(images/headerLeft.png);
    background-repeat: repeat-x;
    position: absolute;
    height: 210px;
    width: 100%;
}

#HeaderRight {
    background-image: url(images/headerRight.png);
    background-repeat: repeat-x;
    position: absolute;
    height: 210px;
    width: 100%;
}

#Menu {
    max-width: 95%;
    position: absolute;
    bottom: 0px;
    left: 5%;
}

不适用于任何浏览器。我错过了什么？:)

4

4 回答 4

2

左右两边不需要额外的 div。您可以简单地将背景图块应用到#HeaderContainer，重叠#Header将覆盖它的背景 =)

对于左右不同的图像，您只需要从一侧重叠背景 - 比如说向左，与另一个 div。

这是一个演示。

于 2013-05-16T06:44:12.660 回答
1

您是否尝试将图像 URL 包含在一些引号内？像background-image: url('images/headerLeft.png');

于 2013-05-16T06:51:31.903 回答
1

我从您的问题中了解到的是，您只想在标题角上实现背景图像（类似于边框图像）。如果是这样的话，

您可以简单地执行以下步骤：

  1. 取元素：父子
  2. 在父元素中重复背景图像并根据您想要显示的图像给定填充。
  3. 为内部元素分配不同的背景颜色或图像。

这样，父元素的背景图像就可以作为标题的边框图像

干杯，维克拉姆

于 2013-05-16T07:18:30.447 回答
1

出于好奇，我已经解决了您的问题。这是小提琴。

的HTML：

<div id="HeaderContainer">
    <div id="HeaderLeft">&nbsp;</div>
    <div id="HeaderRight">&nbsp;</div>
    <div id="header">
        <div id="Menu">
            <ul class="tab">
                <li><a href="page.html">Link</a></li>
            </ul>
        </div>
    </div>   
</div>

CSS：

#HeaderContainer {width: 100%; position:relative;}
#HeaderLeft {background: url("images/headerLeft.png") repeat-x top left; height: 210px; position:absolute; top:0%; left:0%; width:50%;}
#header {background: url("images/header_image.png") no-repeat 0 0 #707173; height: 210px; width: 990px; margin:0 auto; position:relative;}
#HeaderRight {background: url("images/headerRight.png") repeat-x top right; height: 210px; position:absolute; top:0%; right:0%; width:50%;}

我参考了@Martin Turjak 代码中的一些要点。

于 2013-05-16T07:31:25.010 回答