Question

我正试图在背景图片上叠加徽标，但我遇到了一些麻烦。这是我的html背景图片; javascript使图像每秒刷新，因此它就像一个视频流。 dublin-rememberance-floor2是图像，还有一些其他的javascript从数据库中获取此图像并将其全屏显示。徽标是logo.svg，我希望它在左上角上升，但目前它只是在背景后面，我尝试了几种方法但没有成功。

    <body>
        <img class="fullBG" evercam='dublin-rememberance-floor2' refresh="1000" alt="" /> <div class="logo">
    <img height="25" src="http://www.evercam.io/img/logo.svg" border="0" width="175" alt="http://www.evercam.com/" />
</div>

width="175" alt="http://www.evercam.com/" />   
        <img />
        <script>
            $(document).ready(function () {

                Evercam.setApiUrl('http://api.evercam.io/v1');
            });
        </script>
    </body>

这是关于fullBG和徽标的css;

    .fullBG {

        position: absolute;
        top: 0px;
        left: 0px;
        overflow: auto;
        z-index: 1;
        width:100%;
        height:100%;                
    }
.logo{
    position: absolute;
   top: 0;
   right: 0;
}

我改变了我的CSS，这似乎有效

.fullBG {

        position: absolute;
        top: 0px;
        left: 0px;
        overflow: auto;        
        width:100%;
        height:100%;                
    }
.logo{
    position: absolute;
   top: 0;
   right: 0;
z-index: 1;
}

Answer 1

你可以做的一件事就是你可以给logo的z-index＆gt;背景的z-index因此它将出现在背景之上..

Answer 2

我认为您应该将徽标的href链接定位为绝对。另一件事就是你没有单独关闭img，并试图在图像之间放置“a href”。

覆盖图像顶部的图像

2 个答案: