在重复之前将重复背景向左移动一些

Question

重复背景图像（下面链接中的横向）在第一张图像结束并重复开始后有一个空格。

由于我认为没有办法裁剪.svg而不将其光栅化为位图，如何在重复之前将背景向左移动以覆盖白色空间？

以下是发生这种情况的链接：https://dl.dropboxusercontent.com/u/270523/help/search/new.html

Answer 1

我认为不可能使用CSS裁剪图像，但是看看你的网站，我能够通过在{{之后添加具有相同背景的伪元素来使其看起来相当不错。 1}}元素，然后将其#input设置为background-position，使其向右移动2个像素。这会在2px元素后面呈现另一个背景图片副本，将#input向右移动background-image，有效填补2px间隔2px的差距1}}元素#input。

background-image

修改

通过在header元素而不是伪元素上设置背景并修复徽标宽度来执行此操作：

#input:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(dawn.svg) top left repeat-x;
  background-position: 2px;
  margin-top: -17px;
}

或者没有固定宽度的徽标并渲染额外的#header { background: url("dawn.svg") repeat-x 302px; /* 302 is logo-width (300px) + 2px */ } #logo { background: url("logo.svg") no-repeat center center / 100% auto #FFFFFF; /* Make the background-color white. */ width: 300px; } 而不是伪元素：

<强> HTML

div

<强> CSS

<section id="input">
  <input type="text" autocomplete="off" name="search" id="searchInput">
</section>
<div id="backgroundfix"></div>

Answer 2

假设你不能只使用.png，CSS3替代方案就是这样的解决方法：

#input {
  background:
  url(dawn.svg) 1512px 0 no-repeat,
  url(dawn.svg) 756px 0 no-repeat, 
  url(dawn.svg) 0 0 no-repeat
}

当然，你留下了IE8及以下的问题，如果这对你很重要 - 虽然我个人而言，我会给他们一个重复背景的差距。