css [Alt Text to Caption]将alt文本应用于图像，并从中创建标题。 #sitewrench #javascript #css

Posted 2021-05-13

// display image caption on top of image
$(".templatecontent.caption img").each(function() {
    var imageCaption = $(this).attr("alt");
    if (imageCaption != '') {
        var imgWidth = $(this).width();
        var imgHeight = $(this).height();
        var position = $(this).position();
        $("<span class='img-caption'><em>" + imageCaption +
            "</em></span>").css({
            "position": "relative",
            "bottom": "0",
            "left": "0",
            "width": imgWidth + "px"
        }).insertAfter(this);
    }
});

.img-caption {
    background-color: rgba(0,0,0,.70);
    color: white;
    padding: 2%;
    display: block;
    margin-top: -32px;
    text-align: center;
}