在响应式图像上放置徽标

Question

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

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

如果背景响应，我该如何制作，徽标会保留在图像的正确位置？

由于

Answer 1

您可以制作它，以便您也可以旋转一组徽标，徽标集中的每个图像的大小都与背景图像相同，徽标在这些图像中的位置将对应到相应的背景图像所需的位置。

Answer 2

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

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

徽标包装器上的相对位置将使其绝对位置相对于图像而不是像现在这样的页面。我相信维加斯会创建img元素，因此您需要使用javascript（下面使用的jquery）插入徽标包装和徽标元素，也许使用其中一个拉斯维加斯事件：

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