如何在ColorBox彈出窗口中顯示標題和標題（來自圖片“ alt”屬性的標題和來自“ title”屬性的標題

Question

我試圖在ColorBox彈出窗口中顯示標題和標題（圖像'alt'屬性的標題和圖像'title'屬性的標題）。 單擊圖像時將打開顏色框。

這是我想做的一個例子。

img將類似於以下內容。

<img typeof="foaf:Image" src="http://localhost:4444/img.jpg" width="336"   height="254" alt="LEGEND / CAPTION balbalblalblalba balbalblalblalba balbalblalblalba" title="TITLE balbalblalblalba balbalblalblalba balbalblalblalba" class="">

您是否知道我該怎么做？

Answer 1

您可以使用div設置背景圖像

div
{
    height: 616px;
    background:url(http://i.stack.imgur.com/eXA9b.jpg)
}

然后使用：before和：after選擇器，將文本添加到所需位置

div::before { 
    content: "Title"
    position: relative;
    top: 100px;
    background-color: white;
    opacity: 0.5;
}

div::after { 
    content: "Caption";
    position: relative;
    top: 400px;
    background-color: white;
    opacity: 0.5;
}

更改頂部以將文本移至所需位置，並更改不透明度以獲取所需的不透明度

完整的小提琴在這里http://jsfiddle.net/rsm07fdw/