CSS中最後一點了

来源:https://www.cnblogs.com/camboy/archive/2022/08/02/16542629.html
-Advertisement-
Play Games

什麼時候精靈圖呢? 通常在渲染頁面的時候,需要伺服器向我們發送數據,但有的時候一個頁面需要多張圖時,伺服器就會處於連續發圖的工作狀態,但如果我們把需要的圖都放在一張圖上,這樣可以大大的減少服務的工作負擔,打個比喻。伺服器發一張圖是,工作流程是:找到圖片——讀取圖片——發送圖片,如果是發送5個圖片時, ...


什麼時候精靈圖呢?

通常在渲染頁面的時候,需要伺服器向我們發送數據,但有的時候一個頁面需要多張圖時,伺服器就會處於連續發圖的工作狀態,但如果我們把需要的圖都放在一張圖上,這樣可以大大的減少服務的工作負擔,打個比喻。伺服器發一張圖是,工作流程是:找到圖片——讀取圖片——發送圖片,如果是發送5個圖片時,那麼伺服器就需要重覆執行五遍這個操作,但是每次伺服器在執行IO操作時,都會占用伺服器的記憶體和處理器性能,而如果是只發送一張圖片的話,儘管圖片會大,但是她只占用一次記憶體和處理器性能,更多的占用網路資源,但一張圖能有多大呢?

同時在渲染時,也不用等那五個圖片都發送過來,又要執行五次接受——讀取——渲染的工作的,這對前端渲染頁面時也是有好處的,提高了頁面載入速度(總結:減輕伺服器工作負擔,減少伺服器發送次數,提高頁面載入速度)

 

怎麼使用?

首先我們需要一個行內標簽(span等,註意行內標簽的高寬是不起作用的)來存放圖片,註意這個容器的大小要和我們需要的小圖尺寸是一樣的。

將精靈圖設置為背景圖片(如果是img,整個都會露出來),

測量小圖在大圖中的位置,使用background-position:x,y背景屬性來實現位置的移動,分別取負數設置給盒子的background-position:x y。x是水平位置,y是垂直位置。

 

 

 

設置背景圖片大小(background-size),這個應該放在背景那裡展示,以後移動

通常在開發中背景圖片的大小並不是和盒子一米一樣大,這時需要開發人員進行手動設置。

屬性名:background-size

屬性值:水平、垂直

 

 

 

文字陰影(text-shadow)

給文字添加陰影

屬性名:text-shadow

 

 

 

盒子陰影(box-shadow)

給盒子添加陰影

屬性名:box-shadow

屬性值:

 

 

 

 

 

過渡(transition)

可以讓過渡效果變慢,比如旋轉,位移等等,需要在使用的標簽上設置這個屬性,如果是需要這個標簽的某個屬性變化的時候,就給屬性設置參數,然後再加整個過程的時候。

屬性名:transition

 

 

 

從一個小白開始做起,努力做一個美國總統
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • “如果說中小企業是一片片沿溪而耕的農田,那麼我們的願景就是建一座大壩來管理好上游的水資源,來灌溉下游企業。” 騰訊雲資料庫高級工程師楊珏吉說這是他投身資料庫領域的初衷。初創企業、中小企業在資料庫層面的最大需求就是低成本。助力企業降本增效是騰訊雲資料庫一直在努力的方向,尤其在疫情衝擊下的經濟社會中,更 ...
  • 一、Mysql的系統架構圖 二、Mysql存儲引擎 Mysql中的數據是通過一定的方式存儲在文件或者記憶體中的,任何方式都有不同的存儲、查找和更新機制,這意味著選擇不同的方式對於數據的存取有效率的差距。 這種不同的存儲方式在 MySQL中被稱作存儲引擎。 存儲引擎是Mysql資料庫系統的底層組件,數據 ...
  • 如今短視頻已成為人們娛樂社交的主要形式,很多用戶也開始由觀眾逐漸轉變為短視頻製作傳播者,然而複雜的視頻剪輯工具卻令他們望而止步。如何才能降低短視頻製作剪輯門檻,讓更多無經驗者也能製作出優質的短視頻內容,並樂於分享生活趣事呢? 華為HMS Core視頻編輯服務6.6.0版本近期上線AI精彩片段能力,能 ...
  • Date日期 日期對象的定義(使用new關鍵詞) 1.獲取當前的時間(本地的時間) var date = new Date() //不傳參就是獲取當前時間 2.獲取指定的時間 var date = new Date(123456) //一個參數毫秒值 將這個毫秒值去加上對應的1970.1.1 0:0 ...
  • 今天在做css定位的時候遇到一個問題,我想用fixed定位下來,但是發現這個時候定義的百分百寬度不隨著父元素走了而是整個屏幕的百分百,這個就很尷尬了,也不能固定寬度吧,畢竟還要寬度自適應。 這個時候發現了一個position的屬性 sticky 它是relative和fixed的結合體可以理解為,當 ...
  • 最近,在對公司的一個老項目進行優化調整。有個使用的三方插件報表頁面,一旦查詢時間過長就會自動異常並使瀏覽器崩潰,由於這個插件只有個前人遺留的dll文件,實在看不懂裡面的代碼無從下手,既然項目前端大部分是基於EasyUI做的,想著就直接用EasyUI的DataGrid做數據報表明細展示。 由於之前很少 ...
  • 網頁是一個頁面,網站是由多個網頁組成的! 我們在使用代碼編寫的時候能看到這樣的東西,具體內容如下,比較基礎: 認識SEO? SEO就是搜索引擎優化,作用就是你找查找相關內容時,能夠優先給你展示這個內容。 SEO三大標簽(一般由想乾人員提供): title(網頁標簽)、description(網頁描述 ...
  • 項目背景 我們的系統(一個 ToB 的 Web 單頁應用)前端單頁應用經過多年的迭代,目前已經累積有大幾十萬行的業務代碼,30+ 路由模塊,整體的代碼量和複雜度還是比較高的。 項目整體是基於 Vue + TypeScirpt,而構建工具,由於最早項目是經由 vue-cli 初始化而來,所以自然而然使 ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...