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

Question

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

如何重复图像，因为左边和右边不一样？

Answer 1

你必须制作一个额外的图像，最小的部分并在你的背景css中声明这两个图像 背景：网址（XXX.JPG），网址（yy.gif） 或以角度剪切图像，然后重复较小的图像。

Answer 2

如果你想让黑色部分通过， 你不能重复这个图像，因为这不会产生很好的效果，试着只剪掉它的一小部分并重复它，它会均匀分布。

Answer 3

如果您想使图像适合宽度变化，则需要设置需要重复的部分。由于无法镜像图像，因此无法对一个图像执行此操作。

您需要手动镜像图像。一个例子可能是：

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

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

我希望这会有所帮助。

Answer 4

只需将图像置于右侧，然后将bg颜色设置为与图像颜色相同的颜色。

NB ...无法使用透明图像。

<强> JSFiddle Demo

header {
    height:96px;
    background-color:black; /* or whatever color of image is */
    background-image:url(http://i.stack.imgur.com/oF6ey.png);
    background-position:top right;
    background-repeat:no-repeat;
}