Javascript 如何以特殊分割方式重复背景图像

我有一个形象 没有声誉发布一个图像，但如果需要，将在以后放置一些链接

例如，希望在DIVheader的整个宽度上重复它，而不管它的大小如何。 如果将图像分为左、中、右三个部分，例如，希望中间始终固定在中心30px，其余两个部分从左到右重复

第一次尝试是用4k像素制作这张图片，并将其设置为CSS{background:url'images/bg.png'repeat-x center}，但这很愚蠢

第二次尝试是将其划分为3个浮动div，并生成%宽度：

没有这么好的成功，如果我使用它，我会把绝对定位元素放在这个背景上

div.left_bg{height:59px;width:49%;background:url('../images/left_bg.png') repeat-x center center;float:left;}

div.middle_bg{height:59px;width:2%;background:url('../images/middle_bg.png') repeat-x center center;float:left;}

div.right_bg{height:59px;width:49%;background:url('../images/right_bg.png') repeat-x center center;float:right;}

所以，如果有什么诀窍可以纠正的话，请告诉它：

我想就是这个了

HTML

---

你可以从阅读CSS开始…这对你有用吗。它不能保证图像的边缘对齐。如果您需要，可以调整。@acbabis这与您的示例相反，我需要固定大小的中间背景，从左到中的部分需要100%可重复1px宽度，从中到右的部分需要100%可重复1px宽度这是99%的效果，但已经足够了。感谢所有想要帮助div.left_bg{height:59px；width:50%；background:url'../images/left_bg.png'repeat-x center；float:left；}div.middle_bg{height:59px；width:30px；background:url'../images/middle_bg.png'repeat-x center；margin:0px auto；}div.right_bg的人{高度：59px；宽度：50%；背景：url'../images/right_bg.png'repeat-x center；float:left；}对不起，我读错了。你能用于这个项目吗？鲍：非常感谢！干杯。

<div class="header">
    <div class="background">
        <div class="background-image background-left"></div>
        <div class="background-image background-middle"></div>
        <div class="background-image background-right"></div>
        <div style="clear: both"></div>
    </div>
    <div class="header-content">
        Header Text
    </div>
</div>

body {
    padding: 0;
    margin: 0;
}

.header {
    background-color: blue;
    height: 50px;
    padding: 0;
    margin: 0;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    padding: 0;
    margin: 0;
}

.background-image {
    float: left;
    height: 50px;
}

.background-left {
    background-image: url('http://placehold.it/99x50');
    width: calc(50% - 15px);
}

.background-middle {
    background-image: url('http://placehold.it/30x50');
    width: 30px;
}

.background-right {
    background-image: url('http://placehold.it/100x50');
    width: calc(50% - 15px);
}

.header-content {
    position: relative;
}