Question

使用z-index的bootstrap如何将图像置于中间位置，并且在手机和平板电脑上看起来像这个图像没有任何问题？

enter image description here

.imglogo{
    position: absolute;
    z-index:1;
    width: 300px;
}

 <div class="row">
     <img src="img/logo%20corner.png" class="center-block img-responsive imglogo">
    </div>

Answer 1

将以下内容添加到您的css：

top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)

Answer 2

我担心您使用<img>标签制作背景图片。为什么不简单地添加为我的例子：

    body {
        background: url('https://upload.wikimedia.org/wikipedia/commons/c/c0/Gingerbread_House_Essex_CT.jpg') no-repeat;
}

<body>
  <h1 style="color:white;">TEXT OR MENU HERE</h1>
</body>

我添加了一些样式，以便您可以看到文本，但为什么不按照此初始设置而不是引用<img>然后将图像z-indexing到背面。

注意：您不必将此作为body标记运行，您可以在任何类或ID下运行它。

Bootstrap Z-index图像不起作用

2 个答案: