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背景填充重複之間的差距

回答

相關問題