CSS Sprite - 邊緣有細白線

[英]CSS Sprite - thin white lines at edge

我使用存儲在 sprite 中的 14px x 14px 圖像創建了一個工具欄。 顯示時，圖像的頂部和右側有一個非常清晰的細白邊緣（您可能需要放大才能看到它 - 它不超過 1px）。 對於我的生活，我不知道如何擺脫它。 我試過在任何方向上移動偏移量 1px - 這清楚地表明它的位置正確。 更改邊距和 ...

為什么我的壓縮 JPEG sprite 的底部被截斷？

[英]Why is the bottom of my compressed JPEG sprite truncated?

我有一段非常簡單的代碼來顯示精靈中的單個圖像。 當“Sprite”只有一個圖像時，它可以完美運行。 當有三幅圖像時，即使第一幅圖像大小完全相同，圖像的底部也會被截斷。 我想不出為什么會發生這種情況。 我將 img 放在一個 div 中，並將 div 的高度設為 100%，但這沒有任何區別。 這是我 ...

CSS Sprite 菜單圖標，最少只有一個元素 HTML 使用 :before 偽元素

[英]CSS Sprite menu icons with bare minimum one element HTML using :before pseudo-element

賞金將在 3 天后到期。 此問題的答案有資格獲得+50聲望賞金。 Sam想要獎勵現有的答案。 ...

為什么我的 Svg 精靈圖的一部分只顯示背景？

[英]Why one part of my Svg sprite only show the background?

我的原始圖片是淺灰色的，里面有一個“>”符號。 但是當我在網站https://svgsprit.es/ 上將它轉換為 svg 精靈時。 它變成了一個完整的黑色圓圈。我已經在 stackoverflow 中搜索了這個，但還沒有類似的答案。 原svg： <svg id="Layer_1" ...

CSS Sprite 文件太大而無法處理

[英]CSS Sprite file is too big to handle

我知道減少您對服務器的請求將有助於減少加載時間。 將所有圖像放入精靈中可以真正幫助解決這個問題。 但是，什么時候精靈太大了？ 我的頁面的精靈是 1.7mb。 我想過把精靈分成更小的精靈。 這將增加服務器請求，並且似乎是一項毫無意義的任務。 我的網站加載速度太慢，我正試圖找出減速的地方。 誰能建議我應 ...

CSS Spritesheet animation，順時針然后逆時針

[英]CSS Spritesheet animation, clockwise and then anticlockwise

我想順時針動畫精靈然后逆時針連續。 我可以使用兩個不同的按鈕一次做一個。 怎么可以一起做？ 這就是我嘗試過的： Codepen body{ background: #fff; width: 291px; margin: 0 auto; }.clockwise, .anticlockwise{ co ...

如何處理 CSS 精靈（使用背景位置）導致移動設備上的圖像模糊的問題？

[英]How to deal with CSS sprite (using background-position) issue causing blurry images on mobile devices?

首先，當使用 CSS 和普通圖像時，我們設置width:50px ，這在桌面和移動設備上都適用（當然圖像質量和自然尺寸足夠高）。 然而，當使用 CSS sprite 和background-position的簡單技巧時，具有相同的大小（寬度為 50 像素），顯示的圖像將是模糊的（由於縮放或類似的東 ...

瀏覽器中的內存使用情況如何處理圖像——我可以做一個大精靈嗎？

[英]How does memory usage in browsers work for images - can I do one large sprite?

我目前在我網站上許多網頁的底部顯示 115 (!) 個不同的贊助商圖標。 它們是懶加載的，但即便如此，這也很多。 目前，這些圖標是單獨加載的，大小為 75x50（或 x2 或 x3，取決於設備的屏幕）。 我正在考慮將它們全部變成一個精靈，而不是 115 個單獨的文件。 這意味着，我將擁有一個大的 ...

如何使用 SVG 片段並設置背景大小：封面？

[英]How can I use SVG fragments and set background-size: cover?

當我使用fragment時，我在調整 SVG 圖像的大小時遇到​​問題。 當我設置background-size: cover圖像不覆蓋容器中的可用空間。 這是一個演示。 是否可以使用 SVG 片段並能夠以適當的行為在background-size使用contain和cover ？ ...

CSS 圖像 Sprite 在樣式表中不工作，而作為內聯代碼工作

[英]CSS image Sprite not working in the stylesheet, while working as an inline code

我不知道為什么 CSS 圖像精靈不能作為一個單獨的 CSS 文件工作，但它是一個內聯代碼！ 有什么問題？ 我也錄制/附加了一個視頻。 視頻 => https://gofile.io/?c=ITICxx 這對我來說很奇怪，直到現在我找不到解決方案。 我在所有瀏覽器（Chrome、Opera、 ...

在我的項目中制作 CSS Sprite 有問題嗎？

[英]Problem with making CSS Sprite in my project?

我在制作 CSS Sprite 時遇到問題。 這是我第一次使用 sprite，所以我不擅長它。 這是 HTML 代碼： 這是 CSS 代碼： 這是我想要使用的圖像（一個圖像中的 3 個圖標） - 在我的代碼中，我使用了最后一個圖像（兩個人） 這就是結果（如您所見，所有 3 個圖像都粘在 ...

如何在 ReactJS 應用程序中使用多個圖像？

[英]How to use multiple images in ReactJS application?

我有一個 ReactJS 應用程序。 我有 100 張國旗的圖像（圖標）。 我需要在我的應用程序中使用它們。 我有兩種方法可以這樣做，想知道這樣做的最佳方法 - 1) 我只需要進行 1 hhtp 調用即可獲取圖像 2) 這是處理這種情況的最佳方法。 方法 1 - 我可以精靈所有 100 張圖像。 ...

如何在同一個 div 中使用相同的精靈圖像作為具有不同位置的背景圖像（一個 position 在另一個上）？

[英]How to use same sprite image as background-image with different positions(one position over another) in a same div?

原始精靈圖像結果我試圖達到我正在嘗試將精靈圖像中的圖標覆蓋在僅使用 css 的同一精靈的圖像上。 我附上了我想要實現的圖像和原始精靈圖像的樣本。 我已經搜索了互聯網，但沒有太大幫助。 如果你解釋這個概念或指出概念的來源會更好。 ：） 提前致謝。 ...

帶有 CSS 精靈背景的響應式圓圈

[英]Responsive Circle with CSS Sprite background

我在知道如何做正確的數學或公式來制作響應式 css 精靈時遇到問題。 它是一個邊界半徑為 50% 的圓。 所以它的寬度和 padding-bottom 設置為 100% 以使圓成比例。 我的問題是讓精靈通過 animation 匹配並步進（16 次）並響應地工作。 我可以用 px 讓它工作 stat ...

使用CSS-Sprite的一部分作為重復的背景圖片

[英]Use part of CSS-Sprite as repeated background image

我有一個div ，每個寬度和高度大約為300px 。 此背景div應反復用8像素寬度和一個較小的圖像充滿8px的高度。 這個較小的圖像嵌入到較大的Sprite圖像中。 我怎樣才能只使用8x8像素的圖塊來鋪背景呢？ 到目前為止，我已經嘗試過： .world { widt ...

如何使用CSS sprites制作圖像鏈接

[英]How to make an image link using CSS sprites

我有一個實習和我的任務，嘗試使用CSS Sprites創建一個網站。 下面是我正在使用的圖像，我找到了一種只用CSS顯示我想要的圖標的方法。 但是現在，我試圖找出如何鏈接它們。 例如，如果我只想要Facebook圖標鏈接，我該怎么辦？ ...

如何使用CSS精靈？

[英]How use CSS sprites?

我試圖弄清楚如何在具有4個精靈的精靈圖像上使用CSS精靈。 我有顯示前兩個精靈的代碼。 我在編寫代碼以顯示最后兩個精靈時遇到麻煩。 我也無法單獨顯示第三和第四精靈。 這是圖像： 如何顯示最后兩個？ 如何單獨顯示第三和第四子畫面？ ...

僅當我使用Sprite時，我的代碼才會填充svg圖像的筆觸

[英]my code fills inside the stroke of my svg image only when I'm using sprite

我有一個svg徽標，該徽標在文本的中間有一些文本路徑和圖標路徑。 當它是內聯的並且我使用“ fill：#fff”時，它將僅填充文本，這是很好的。 當我使用sprite並使用“ fill：#fff”時，它什么都不會改變，並且所有內容都被填充為黑色，即使在圖標的筆觸內部也不應該這樣做。 請 ...

如何向基於setInterval的精靈動畫添加5秒的延遲？

[英]How can I add a 5 second delay to this setInterval based sprite animation?

我有一個使用setInterval方法運行的sprite，它始終運行，每60ms的間隔將css背景位置（x）移動100 /（圖像數量-1）。 當位置達到96％時，我將其重置為0。很簡單。 這是用百分比動畫精靈的公式。 現在，我只想在每次運行之間添加5秒的延遲（每次達到96％x位置時，等 ...

使用CSS Sprites：多次復制一張大圖像會給客戶端帶來負擔嗎？

[英]Using CSS Sprites: Does replicating one large image many times burden the client?

我有一個有趣的小部件，它邀請用戶從114種動物中進行選擇。 用戶界面包括每個物種的小縮略圖，大小均相同（100x70）。 縮略圖的總和為210萬。 我不急於發出114個服務器請求，因此我使用ImageMagick制作了一個非常長的圖像（11400x70），該圖像降至960K。 因此， ...