Question

如何让图像“logo_image.jpg”位于此滑块的顶部，位于中央并固定？像这张图片中的内容：http://postimg.org/image/62fcxc0kl/

另一件事，当我放大/缩小页面时，整个滑块必须拉伸宽度。

这是代码：

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SLIDE</title>

<style>

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body {
    background-size: cover;
    margin: 0;
    } 

div#slider {
    overflow: hidden;
    width: 100%;
    height: 500px;
    position: relative;
    }

div#slider figure img {
    width: 500%;
    heigh: 500%;
    position: inherit;
    float: left;
    }

div#slider figure {
    position: relative;
    align-content: center;
    width: 100%;
    heigh: 50%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 30s slidy infinite;
    }

</style>


</head>

<body>

<div id="whole">
    <div id="logo_image">
    <img src="logo_image.jpg" height="50%" width="50%"  alt="" />
    </div> 
    <div id="slider">     
        <figure>
        <img src="slide.jpg" alt="">
        </figure>
    </div>

</div>
</body>
</html>

Answer 1

尝试使用此css：

#logo_image {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 888;
} 

#whole { position: relative; }

#logo_image > img {
     margin-top: 155px;
}

如何将静态图像放在幻灯片图像上？

1 个答案: