Question

因此很难将其全部融入js小提琴中，所以请参阅the website。

基本上我有一个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-index需要改变，有填充/边距问题，需要改变的背景属性或其他东西。

由于

Answer 1

这可能是您遇到的原因：

您的背景尺寸设置为background-size:100px;尝试将其移除，而不是添加宽度和高度。
您的图片可能存在问题，请尝试使用PS打开并缩放，并检查边框是否包含任何错误（空格）。有时，如果您在图像上错过1px边框，则可能无法在图像中看到它，但HTML可能会以不同的方式对其进行解释。

Answer 2

您遇到问题，因为您要调整图案中的原始图像大小并且不保持完全相同的宽高比。因此，您最终会在图像模式的边缘处出现杂散像素。

例如，采用模式“patt2”：

<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"></image>
</pattern>

图像“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>

线条消失。

或者，您可以告诉浏览器使用缩放模式来隐藏间隙。您可以使用属性“preserveAspectRatio”执行此操作。

值“none”将起作用。它应该保证图像填充您要求的尺寸而不会留下杂散像素：

<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>

css背景填充重复之间的差距

2 个答案: