Jquery 如何在颜色框弹出窗口中显示标题和标题（来自图像的标题'；alt'；属性和来自'；标题'；属性）

我试图在颜色框弹出窗口中显示标题和标题（来自图像“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="">

---

你知道我该怎么做吗？

你可以用一个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;
}

更改顶部以将文本置于所需位置，更改不透明度以获得所需的不透明度

---

这里的full fiddle

有很多方法可以做到这一点。您可以使用

：after

，

：before

和jquery来单击零件。