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

Question

重复的背景图像，即下面链接中的风景，在第一张图像结束和重复开始后有一个空白。

因为我认为没有办法在不将 .svg 栅格化为位图的情况下裁剪它，我如何才能让背景在重复之前向左移动一些以覆盖空白区域？

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

Answer 1

我不认为可以使用 CSS 来裁剪图像，不过看看你的网站，我可以通过在 #input 元素之后添加一个具有相同背景的伪元素来让它看起来相当不错，然后将其background-position设置为2px，使其向右移动2个像素。这会在 #input 元素后面呈现背景图像的另一个副本，将其 background-image 向右移动 2px 有效地填补了 2px 元素 #input 留下的 background-image 间隙。

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

编辑:

通过在标题元素而不是伪元素上设置背景，并固定 Logo 宽度来做到这一点:

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

或者没有固定宽度的 Logo 并呈现额外的 div 而不是伪元素:

HTML

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

CSS

#backgroundfix {
  width: 100%;
  height: 100%;
  background: url(dawn.svg) top left repeat-x;
  background-position: 2px;
  margin-top: -17px;
}