0

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

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

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

4

2 回答 2

1

我认为不可能使用 CSS 裁剪图像，但看看你的网站，我可以通过在元素后面添加一个具有相同背景的伪#input元素，然后设置使其background-position向右2px移动 2 个像素。这会在元素后面渲染背景图像的另一个副本，通过有效地填充元素留下的间隙将其向右#input移动。background-image2px2px#inputbackground-image

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

或者没有固定宽度的徽标并渲染一个额外的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;
}
于 2013-04-29T03:01:42.143 回答
0

Assuming you can't just use a .png instead, a CSS3 alternative would be a workaround like this:

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

Of course, you are left with the problem of IE8 and under, if this matters to you—though personally, I'd give them just the one repeated background with the gap.

于 2013-04-29T03:21:28.153 回答