Jquery css背景填充重复之间的间隙

所以这是相当困难的，以适应所有的js小提琴，所以请看

基本上我有一个jquery的东西

$("#patterns #pattern11").click (function() {
    $('#text').removeClass();
    $('#text').addClass('background11');
});

这意味着当点击“框架背景”下的图案时，它会改变框架上的背景。因此，除了这些线条穿过背景外，这一切都很好

下面是正在添加的css类

    .background11 {
    color: white;  /* Fallback: assume this color ON TOP of image */
   background: url("Images/pattern11.jpg");
   background-size:100px;
}

我有一些想法，我已经尝试过了。要么z索引需要更改，要么存在填充/边距问题，要么背景属性需要更改，要么存在其他问题

---

谢谢

发生这种情况的原因可能很少：

您的背景大小设置为

背景大小：100px尝试删除它，而不是添加宽度和高度

您的图像可能有问题，请尝试使用PS和zoom打开图像，并检查边框是否包含任何错误（空白）。有时，若你们在你们的图像上遗漏了1px边框，你们可能无法在图像中看到它，但HTML可能会以不同的方式解释它

---

您遇到了问题，因为您正在调整模式中原始图像的大小，而没有保持完全相同的纵横比。因此，在图像模式的边缘上会出现一个或多个游离像素

例如，以模式“patt2”为例：

图像“pattern2.jpg”是542x774，但您将其缩放到700x1000，这与比例不完全相同。它差了一小部分

如果像这样重新定义图案：

<pattern id="patt2" patternUnits="userSpaceOnUse" width="400" height="500">
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Images/pattern2.jpg"
           x="0" y="0" width="542" height="774"></image>
</pattern>

线条消失了

或者，您可以告诉浏览器使用缩放模式来隐藏间隙。您可以使用属性“preserveSpectratio”来实现这一点

“无”值将起作用。它应确保图像填充您要求的尺寸，而不会留下散乱的像素：

<pattern id="patt2" patternUnits="userSpaceOnUse" width="400" height="500">
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Images/pattern2.jpg"
           x="0" y="0" width="700" height="1000" preserveAspectRatio="none"></image>
</pattern>

Hi试试这个$（'#text'）.removeClass（“要删除的类名”）；尝试修复这些图像，看起来每个图像的顶部/底部都有一条1px的白色/透明线。CSS/Javascript/jquery看起来没有问题，实际上，尝试删除

背景大小：100pxcss中的属性。您添加这个有什么原因吗？您需要在中给出图像（pattern11.jpg）的宽度和高度css@Robin不是这样。我的remove类删除了以前的任何类，因为我不知道要删除的类的名称。非常感谢！因此，在将来，请确保正确缩放图像。
<pattern id="patt2" patternUnits="userSpaceOnUse" width="400" height="500">
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Images/pattern2.jpg"
           x="0" y="0" width="700" height="1000" preserveAspectRatio="none"></image>
</pattern>