CSS Sprite的一些最佳實踐方法

2022-09-25 15:57:15 字數 944 閱讀 8546

下面是一張樣圖:

1  本文的目的並不是講css sprite如何讓乙個**更快,而是說一些使用css sprite的時候的一些最佳實踐。

如果你邊切圖邊寫css,然後等你完成了整個**之後再來拼接這些到乙個sprite中,你就不得不完全重寫你的css,你也必須要花費很多的時間來用ps拼接大量的——這是件令人倍感糾結的事情。但是如果邊切圖邊整合,就會比較容易些。

這個小技巧貌似比較難理解。我直到建立乙個比較大的sprite的時候才理解到這一點。比如,如果我們希望乙個出現www.cppcns.com在乙個元素的左側:

將那個放到sprite的右邊(本文開始的那個sprite)。這樣的話,當你通過css移動背景的位置的時候,基本上不可能有其它的小意外的出現在它的附近。使用sprite的時候常常遇到的乙個問題是會出現在它不該出現的位置。

當使用css sprite的時候,只用background-position: bottom -300px或backgro right -200px;非常容易。這剛開始的時候是可行的,但是問題是,當你在寬度上或高度上擴充套件相關sprite的時候,原先設定的位置可能是錯的,因為那個已經不再sprite的底部或右部了。使用確切的位置來避免這個問題。

就像你在本文頂部的例項看到的那樣,那些小都被預留了足夠的空間。為什麼不把他們塞到一塊來讓sprite更小呢? 因為使用這些的元素通常都會有大量的內容而且可能會需要擴充套件的間距,以至於其它不會意外出現。

例子:例子中的每個條目都有個帶數字的作為背景。stanand如果你仔細看了上面的那張,你可以看到這三個數字是如何錯開排列的,這樣如果內容增多,其它就不會意外出現。

如果你的**經過良好的設計,那麼你將會有一大堆的來整合進到sprite裡面,這樣你就需要你個非常大的sprite來恰當的放置這些。這是很不錯的。sprite裡的空白不會占用太www.cppcns.com多的檔案大小。

本文標題: css sprite的一些最佳實踐方法

本文位址:

docker的一些實操筆記

2.啟動nginx docker run name nginx p 80 80 d nginx 這樣就簡單的把nginx啟動了,但是我們想要改變配置檔案nginx.conf 進入容器,命令 docker exec it nginx bash nginx.conf配置檔案在 etc nginx 下面,...

保障Web安全的一些最佳實踐

恩,一切的前提還是你先保證網路安全和主機安全,然後再考慮web安全,不然白搭.1.物理網路架構方面 限制外界web server的連線,比如只提供80埠。不在web server上儲存機密的資訊,如果儲存,最好加密。比如其他server的帳號資訊。2.認證 採用規範的認證方法,密碼,證書,活動金鑰,...

保障Web安全的一些最佳實踐

恩,一切的前提還是你先保證網路安全和主機安全,然後再考慮web安全,不然白搭.1.物理網路架構方面 在不同的主機上部署web server,app server,database server。限制外界web server的連線,比如只提供80埠。限制web server與app server,da...