如何在 ColorBox 弹出窗口中显示标题和标题（来自图像“alt”属性的标题和来自“标题”属性的标题答案

【问题标题】：How do I display, in a ColorBox popup, a caption AND a title (caption from image 'alt' attribute and title from 'title' attribute如何在 ColorBox 弹出窗口中显示标题和标题（来自图像“alt”属性的标题和来自“标题”属性的标题
【发布时间】：2015-11-17 11:05:53
【问题描述】：

我试图在 ColorBox 弹出窗口中显示一个标题和一个标题（来自图像“alt”属性的标题和来自图像“标题”属性的标题）。单击图像时会打开颜色框。

这是我想做的一个例子。

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="">

你知道我该怎么做吗？

【问题讨论】：

有很多方法可以做到这一点。您可以使用:after,:before 和 jquery 来点击部分。

标签： jquery html css colorbox

【解决方案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/

【讨论】：