web前端sprite,精靈圖,雪碧圖

来源:https://www.cnblogs.com/fjxylin/archive/2020/02/13/12305878.html
-Advertisement-
Play Games

css sprite 俗稱:精靈圖,雪碧圖,指將整個頁面不同的圖片or圖標合併在一張圖上;優點:使用CSS Sprite 可以減少網路請求,提高網頁載入性能,不會出現網頁上端載入完畢下麵還在載入中這一問題 缺點:如果後期更改其中某一圖標,且其像素大小發生改變,需要重新對所有圖標進行定位 精靈圖製作: ...


css sprite

俗稱:精靈圖,雪碧圖,指將整個頁面不同的圖片or圖標合併在一張圖上;
優點:使用CSS Sprite 可以減少網路請求,提高網頁載入性能,不會出現網頁上端載入完畢下麵還在載入中這一問題

缺點:如果後期更改其中某一圖標,且其像素大小發生改變,需要重新對所有圖標進行定位

精靈圖製作:

photoshop選擇透明圖層,將需要的圖標和圖片放入

 

測試用圖:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 margin: 50px;;
 9             }
10                 
11             #box a{
12                 display: block;
13                 width: 74px;
14                 height: 20px;
15                 border: 1px solid #ccc;
16                 color: black;
17                 font-size: 12px;
18                 text-decoration: none;
19                 text-align: center;
20                 border-top: none;
21                 padding-top: 54px;
22                 background-image: url(icon.png);
23             }
24             #box #zone{
25                 border-top:1px solid #CCCCCC;
26                 background-position: -17px 4px;
27                 background-repeat: no-repeat;
28             }
29             #box #zone:hover{
30                 background-position: -17px -98px;
31             }
32             #box #mail{
33                 background-position: -12px -186px;
34                 background-repeat: no-repeat;
35             }
36             #box #mail:hover{
37                 background-position: -12px -286px;
38             }
39         </style>
40     </head>
41     <body>
42         <div id="box">
43             <a href="#" id="zone">空間</a>
44             <a href="#" id="mail">郵箱</a>
45         </div>
46 
47     </body>
48 </html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • sprd_battery.c 是充電驅動,這個是充電功能的核心內容,電量顯示策略、溫度檢測策略、充電保護機制等功能在這裡實現,功能實現與硬體細節剝離,調用通用介面實現邏輯控制; 1 sprdbat_probe函數: 1.1 解析設備樹: sprdbat_parse_dt函數如下: 2. 各個工作隊列 ...
  • 鳴謝:http://blog.csdn.net/leimengyuanlian/article/details/18748599 http://www.cnblogs.com/maowang1991/archive/2013/02/05/2893142.html https://www.cnblog ...
  • 編譯安裝redisd [toc] 安裝方法: yum安裝 1. 查看yum倉庫redis版本 2. yum安裝 3. 啟動服務並設為開機啟動 4. 查看redis埠 5. 測試登錄redis 6. 測試使用 編譯安裝 下載當前最新release版本redis源碼包 :http://download ...
  • Apache Flink社區宣佈Flink 1.10.0正式發佈! 本次Release版本修複1.2K個問題,對Flink作業的整體性能和穩定性做了重大改進,同時增加了對K8S,Python的支持。 這個版本標志著與Blink集成的完成,並且強化了流式SQL與Hive的集成,本文將詳細介紹新功能和主 ...
  • 1、使用 show status 瞭解各種 SQL 的執行頻率 該命令可以查詢 sql 命令的執行次數。 2、定位執行效率較低的 SQL 語句 定位執行效率較低的 SQL 一般有兩種方法: 1. 通過慢查詢日誌定位效率低的 SQL,用 該選項啟動; 2. 慢查詢日誌在查詢結束後才會記錄,所以在應用執 ...
  • 在上章14.Android-使用sendMessage線程之間通信我們學習瞭如何線上程之間發送數據. 接下來我們便來學習如何通過socket讀寫TCP. 需要註意的是socket必須寫在子線程中,不能在ui主線程中直接使用,所以我們這裡創建了兩個class: MainActivity(主界面)、Tc ...
  • 1.Handler介紹 Handler 是一個消息分發對象。handler是Android給我們提供用來更新UI的一套機制,也是一套消息處理機制,通過它可以實現在不同線程之間傳遞消息 本章Handler類要用到的方法有: void handleMessage(Message msg); //需要重寫 ...
  • 在SwiftUI中顯示模態視圖 簡介 這裡教大家如何彈出一個簡單的模態視圖。分別有兩個頁面,ContentView和GCPresentedView,以下對應簡稱為A和B。我們要做的是在A視圖中點擊按鈕跳轉到B視圖,然後再從B視圖點擊按鈕返回到A視圖。 步驟 在A視圖中創建按鈕和模態視圖代碼 使用 對 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...