Question

我的页面上有一个固定高度和宽度的标题。从标题图像的每个边缘开始，我拍摄了一些小的1像素图像，我希望在该宽度的空间上重复这些图像。

无论如何，我的问题是我不能让小图像在标题周围重复。我开始尝试重复标题右侧的背景图像，而是背景跳转到下一个“行”并在那里重复。当我添加左头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%;
}

无法在任何浏览器中使用。我错过了什么？：）

Answer 1

左右不需要额外的div。您只需将背景图块应用于#HeaderContainer，重叠的#Header将覆盖其背景=）

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

这是DEMO。

Answer 2

您是否尝试将图片网址包装在某些引号内？与background-image: url('images/headerLeft.png');

一样

Answer 3

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

您只需按照以下步骤操作：

取元素：父母和子女
根据您想要显示的图像在父元素中重复背景图像并给出填充。
为内部元素指定不同的背景颜色或图像。

这样，父元素的背景图像就像标题

干杯，维克拉姆

Answer 4

出于好奇的缘故，我已经解决了你的问题。这是fiddle。

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代码中获取了一些参考点。

围绕居中标题重复背景图像

4 个答案: