0

这是我要重复的标题的背景图像在此处输入图像描述

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

4

4 回答 4

0

您必须制作一个额外的图像，最小的部分并在您的背景 css background:url(xxx.jpg),url(yy.gif) 中声明这两个图像，或者以一定角度剪切图像并重复较小的图像。

于 2013-10-16T16:25:03.417 回答
0

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

于 2013-10-16T16:27:46.267 回答
0

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

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

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

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

我希望这有帮助。

于 2013-10-16T16:37:47.833 回答
0

只需将图像放在右侧并设置与图像颜色相同的背景颜色即可。

注意...不适用于透明图像。

JSFiddle 演示

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;
}
于 2013-10-16T17:55:30.483 回答