jquery - 响应式图像上的徽标放置

Question

jQuery vegas我有一个使用插件http://vegas.jaysalvat.com/淡入淡出的响应式背景图像

我在一个单独的 div 中有一个徽标，它在背景图像前面淡入淡出。它必须绝对定位到背景图像中的特定位置。我修改了插件以更新徽标左侧和顶部坐标。

如果背景是响应式的，我该如何做到这一点，徽标将留在图像的正确位置？

谢谢

Answer 1

您可以这样做，以便您还可以旋转一组徽标，其中徽标集中的每个图像的大小都与背景图像相同，并且徽标在这些图像中的位置将对应于它的位置需要用于相应的背景图像。

Answer 2

您可以尝试将徽标元素放在 vegas 幻灯片的图像元素中。我认为它看起来像这样：

<img id="vegas-background">
    <div id='logo-wrapper' style='position: relative; height: 100%;'>
        <img id="logo" />
    </div>
</img>

logo-wrapper 上的相对位置将使绝对位置相对于图像，而不是像现在这样的页面。我相信 vegas 创建了该 img 元素，因此您需要使用 javascript（下面使用的 jquery）插入 logo-wrapper 和 logo 元素，也许使用 vegas 事件之一：

$('body').bind('vegasstart', 
    function(e) {
        $('vegas-background').append("
            <div id='logo-wrapper' style='position: relative; height: 100%;'>
                <img id="logo" />
            </div>
        ");
    }
);