如何在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::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;
}

然后使用：before和：after选择器将文本添加到所需的位置

{{1}}

更改顶部以使文本到达您想要的位置，并使用不透明度来获得所需的不透明度

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