Question

我有一张图片（没有声明发布图像，但如果需要，稍后会提供一些链接）

想要在DIV的整个宽度（例如标题）中重复它，无论它的大小是多少。
如果在3个分割部分“左，中，右”切割图像，则要将中间固定在中心（例如30px），然后休息2个部分以向左和向右重复。
- 第一次尝试用4k像素制作这张照片并用CSS设置{background：url（'images / bg.png'）repeat-x center center}但是很愚蠢
- 第二次尝试是将它分成3个浮动的DIV并制作％宽度：

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

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;}

所以，如果有一些技巧可以做到正确，请告诉它：）

Answer 1

我认为就是这样（Fiddle）

HTML

<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>

CSS

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;
}

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

1 个答案: