css - 将图像定位到背景中

Question

我正在为我的女朋友开发一个网站。但我坚持定位标志。

这是我正在谈论的网站：

http://xntriek-test.s3-website-eu-west-1.amazonaws.com/

我尝试使用 z-indexes 但不起作用。我还尝试为身体设置背景图像。但是后来我限制了图像的大小。我正在使用 Twitter bootstrap 将这个东西放在一起。

目前这是我用于徽标的类：

.logo{
  position: absolute;
  top: 25px;
  left: 25px;
  height: 45%;
  width: 30%;
  z-index: 1;
}

目前，我将图像定位在主要内容旁边的跨度中。但是因为我使用的是 position: absolute ，所以如果我说的话，这不会有什么不同。

如果任何人有任何想法我可以如何解决这个问题，也许是一种不同的方法，那么我现在正在做。欢迎任何帮助！

score 0 · Accepted Answer

您需要按照以下内容修改您的 CSS：

<div class="span6 offset3" style="position: relative; z-index: 1">

z-index影响定位元素，所以只需添加position: relative到您感兴趣的范围内。

我会创建一个特殊的类“z-wrap”并修改样式表。

<div class="span6 offset3 z-wrap">

在 CSS 样式表中：

.z-wrap {position: relative; z-index: 1}

注意您可能需要根据您在徽标容器中设置的任何 z-index 值来调整 z-index 的值。

score 0 · Accepted Answer

首先，您使用 css 扭曲徽标，如果您希望图像具有响应性，请将其放置在响应元素中，放置这个绝对值并让图像调整它的大小。

#logoContainer {
 position:absolute;
 top:25px;
 left:25px;
 width:30%;
 z-index:-1;
}     

img.logo{
 width:100%;
 height:auto;
}

您的 html 应如下所示：

<div id="logoContainer">
 <img src="yoursrc/logo.gif" alt="The Logo" class="logo" />
</div>

把它放在你的身体标签打开之后，而不是在其他一些元素中。通过将它放在其他元素中，徽标会继承它们的 z-index，您只能影响它在父级内部的 z 定位，而不是在整个页面上。

score 0 · Accepted Answer

使用 z-index 属性时要记住的一件事：

只有使用其“位置”属性（相对、绝对或固定）放置的元素会受到“z-index”的影响。

所以如果你想解决你的问题，要么把你的标志作为背景图片，要么在内容的 CSS 中使用位置。

3 回答 3