最好的開源 CSS 和 jQuery 圖片標題

在 HTML 中使用圖像標題一直是 Web 開發人員的悠久傳統。 通常這涉及<figure>和<figcaption>元素，以及一些額外的 CSS 樣式。 由於大規模的開源運動，我們可以找到更多用於在您自己的項目中構建這些圖像標題的插件和啟動腳本示例。

我想展示一小部分用於製作 HTML 圖像標題的 CSS 和 jQuery 解決方案。 這些解決方案的方法和目的差異很大，但都值得考慮。 一些開發人員需要在 WordPress 或 Joomla! 中實現腳本，而其他開發人員可以使用靜態 HTML。 我希望這個集合能夠為研究該主題提供一個起點，並挑選出一個非常適合您自己需求的圖像標題代碼庫。

CSS 圖片標題

使用 CSS 效果構建自己的圖像標題可能很困難。 有時它需要瀏覽器黑客和一些你不認識的額外語法。 但這也表明當前的網頁設計行業在很短的時間內取得了多大的進步。

這些示例只是我發現的最佳解決方案，它們提供了基於 CSS2 屬性和 CSS 過渡動畫開發的無縫圖像標題效果。

標籤.css

我想首先介紹 label.css 作為最好的 CSS 圖像標題庫之一。 這允許您將類名添加到帶字幕的圖像上，然後這些圖像將在 HTML 中更新。 您可以強製字幕出現在圖像的任何位置，即使在角落。

加上 label.css 庫可以很容易地隱藏標題，直到用戶將鼠標懸停在圖像上。 這種技術很棒，因為有時您希望標題在頁面上顯示為靜態文本，而在其他時候隱藏的動畫效果更重要。

Hongkiat 圖片說明

我最喜歡這篇 Hongkiat 文章的地方在於，各種圖像標題都將使用不同的 CSS 技術實現。 它們都耦合到一個大字幕庫中，您可以挑選出您最喜歡的動畫來構建一個全新的界面。 這些代碼都在現代瀏覽器中進行了測試，它們支持所有主要的 CSS 前綴。

然而，一些用戶對這個腳本的最大問題是它不遵循圖形/圖形標題的 HTML 結構。 所有標題內容都保存在容器 div 內的 span 內。 這顯然仍然可以很好地呈現，但它沒有標記內容的確切類型。 但只需 5-10 分鐘即可更新元素，使其以更格式化的結構工作。 查看現場演示以查看這些字幕的實際效果。

動畫 HTML5 字幕

Coalmarch 的 HTML5 figcaption 示例是一個非常簡單的 CSS 圖像標題教程。 您可以在幾分鐘內完成這些步驟，並擁有一個出色的佈局，在懸停時顯示隱藏的標題。 腳本本身確實包含少量 jQuery，但完全可以替換它並使用 CSS 過渡效果。

滑入式圖像標題

CSS-Tricks 博客在網頁設計社區中非常有名。 他們關於創建滑動圖像標題的教程已經在許多瀏覽器中進行了測試，並且可以完美運行。 這個演示給我留下了深刻的印象，不僅僅是因為效果，還因為標準的 HTML 語法。 figure 和 figcaption 元素不僅僅是為了很好的衡量標準。 這是為了幫助瀏覽器區分各種頁面元素之間的上下文。 查看現場演示並親自查看此效果。

jQuery 圖片標題

使用 jQuery 的最大好處是更高百分比的瀏覽器支持。 任何啟用了 JavaScript 的人都應該以與任何其他瀏覽器完全相同的方式查看您的圖像標題。 CSS 更簡單，因為一些開發人員寧願不參與腳本編寫。 但這些解決方案同樣重要，它們極大地促進了前端體驗。

字幕.js

我不久前才發現 Caption.js，這個庫已經成為 Web 開發人員的優秀資源。 該腳本將基於您自己的 jQuery 選擇器（類、ID 等）定位圖像，並且它將自動包含圖形和 figcaption 元素。 這是至關重要的，因為最終頁面渲染將在一些 CSS 定位的幫助下正確顯示。 Caption.js 是開源的，可以免費貢獻或從 Github 下載。

jQuery.imageCaption

現在我想說 jQuery.imageCaption 是運行 CMS 引擎的開發人員的完美解決方案。 這個插件非常容易定制，並且可以根據圖像的 alt 文本快速提取標題。 同樣，這將渲染出 figure 和 figcaption 元素，這對 SEO 好處很大。

通過調用函數imageCaption() ，您不需要將任何參數傳遞給調用。 這仍然會在頁面上正確呈現，您可以將其應用到任何 WordPress 博客文章中。 類似地，添加到 img 元素上的任何類都將轉移到包含的<figure>元素，這意味著您可以通過 CSS 進行更多控制。

字幕

Captionate 絕對是一個被低估的開源項目，因為那裡有所有其他解決方案。 它由 North Krimsly 開發，用於各種 CMS 引擎。 您可以在您自己的網站上找到說明實施 Captionate 的過程的教程指南。

基本上，您將編寫一個帶有.caption類的 HTML5 img 元素，這將被 jQuery 腳本拾取。 然後，alt 屬性文本被傳輸到 figcaption 元素並寫入 HTML。 瀏覽示例頁面，您可以看到 Captionate 語法與其他解決方案相比相當簡約。

字幕

深入研究最後一個示例，我認為 HCaptions 可能擁有比圖像更廣泛的範圍。 這個 jQuery 插件是為處理所有可以呈現為 HTML 的字幕內容而開發的。 查看現場演示頁面，您將看到一系列不錯的示例。 同樣，各種選項允許您控制每個字幕的速度和位置。 有一些更好的解決方案可以單獨管理 HTML 圖像，但 HCaptions 插件確實可以為其他標準網頁元素添加字幕。

結束

您可能會對這些腳本的足智多謀感到驚訝。 當您使用有效的 HTML5 代碼時，它為 Google 提供了更好的機會來抓取您的頁面，然后索引相關上下文。 如果我掩蓋了任何出色的圖像字幕腳本，請在帖子討論區與我們分享。