html - 当右侧和左侧不同时，如何重复标题图像的背景？

Question

这是我要重复的标题的背景图片

由于左右不一样，如何水平重复图像？

Answer 1

如果你想让图像适应可变宽度，你需要设置一个需要重复的部分。无法对一张图像执行此操作，因为您无法镜像该图像。

您需要手动镜像镜像。一个例子可以是:

HTML:

<div class="left-image side"></div>
<div class="center"></div>
<div class="right-image side"></div>

CSS 应该是这样的:

.side {
    position: absolute;
    top: 0;
    height: *height of the image*;
    width: *width of the image*;
}

.left-image {
    background: url('*link to left image*') no-repeat 0 0 transparent;
    left: 0;
}

.right-image {
    right: 0;
    background: url('*link to right image*') no-repeat 0 0 transparent;
}

.center {
    height: *height of lowest part, or height of image*;
    width: 100%;
    background: url(*url of image*) repeat-x 0 0 transparent;
    /* or */
    background: *color*;
}

中心可以是重复图像，也可以只是图像宽度和高度的背景颜色。这取决于您使用的图像。

希望对您有所帮助。