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

所以这很难适合所有的js小提琴，所以请看the website。css背景填充重复之间的差距

基本上我有的

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

一个jquery事，这意味着在“帧背景”的图案被点击时改变帧的背景。所以这个效果很好，除了这些线条出现在背景中。

这里是要添加

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

的CSS类我有我已经尝试过的一些想法。 z-index需要改变，存在填充/保证金问题，需要更改的背景属性或其他内容。

感谢

来源

2014-11-06 dunn_rite

嗨试试这个$（'＃text'）。removeClass（“class name to be removed”）; – Robin 2014-11-06 08:55:44

尝试修复图像，它看起来像是每个图像的顶部/底部都有一个1px的线条，可以是白色/透明的。看起来不像CSS/Javascript/jQuery的问题 – Nunners 2014-11-06 08:56:52

实际上，尝试从CSS中删除'background-size：100px;'属性。你有没有增加这个的原因？ – Nunners 2014-11-06 09:01:54

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

例如，以图案“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”来做到这一点。

值“无”将工作。它应该保证图像填充你所要求的尺寸而不会留下杂散的像素：

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

来源

2014-11-06 09:34:37

啊完美谢谢！所以在将来确保图像正确缩放。 – 2014-11-06 12:59:01

可能有几个原因您遇到这种情况：

你的背景大小设置为background-size:100px;尝试删除它，而不是说增加的宽度和高度。
您的图片可能有问题，请尝试用PS打开并缩放并检查边框是否包含任何错误（空格）。有时，如果你错过了1px的图像边界，你可能无法在图像中看到它，但HTML可能会以不同的方式解释它。

来源

2014-11-06 09:08:50

嗨，这不是解决方案，但无论如何感谢。 – 2014-11-06 12:59:47

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

回答

相关问题