Question

我正在尝试构建一个半透明的网站标题，并且包含一个悬挂在标题div之外的半透明图像，就像下面链接的图像一样。

由于重叠不透明，我不能简单地将半透明图像放入半透明div中，并为图像添加负边距。我能想到的最好的方法是获取标题图像的高度，并切割徽标图像的那一点，就像附加图像一样。然而，这并不理想，因为不能很好地响应等等。

关于如何实现这种外观的任何想法？

提前致谢。

Answer 1

如果您知道菜单的高度，那么您可以将徽标和菜单放在容器内。然后定位徽标，其顶部值等于菜单的高度。

.header-bg {
    background: rgba(225, 225, 225, 0.5);
    position: relative;
    height: 60px;
}

.header-bg .logo {
    width: 90px;
    height: 90px;
    background: rgba(225, 225, 225, 0.5);
    position: absolute;
    top: 60px;
    left: 10%;
}

看到这个小提琴：http://jsfiddle.net/3kxBt/1/

希望在某种程度上有所帮助。

Answer 2

您可以对rgba和background的{{1}}使用.logo颜色格式，以达到您想要的效果。但是，您必须向header课程提供position: absolute;，因为它必须位于.logo下方。如果您将header置于.logo之上，则颜色会重叠并且看起来不对。因此，它需要从header的底部开始。

header应该header，以便position: relative;相对于.logo定位。这样，您甚至不需要知道标题的高度，因为当您定义header的{{1}}位置时，您只需使用top即可始终启动在.logo下面。您不必对top: 100%值进行硬编码。

现在，您需要将header内的实际徽标（图片）移到顶部，因为它现在位于top下方。为此，您可以通过给予负值.logo来简单地推送图像。

SEE THE DEMO

代码如下所示：

<强> HTML

header

<强> CSS

margin-top

Answer 3

这是一个有趣的问题，有几种方法可以解决它;我立即想到了两个。

首先是你的方法;小心地放置东西，这样你就不会有多个半透明的部分重叠。这不会太困难;如果你采用这种方法，我建议将标题分成图像的左右两侧，并使用绝对定位。

第二种更简单的方法是使用您希望已应用的半透明白色叠加创建图片版本。然后您可以将其用作菜单和图像的背景。这里唯一棘手的事情是你必须通过使用固定定位或计算的像素偏移来确保图像对齐。这种方法已经存在了很长时间，你可以看到它的任何早期例子（2001-ish）here。

Answer 4

我对它的看法是创建一个:before伪元素。它有它的问题，包括如果徽标在某些时候尺寸发生变化，但整体上它有效。

HTML

<a class="logo" href="#">
    <img src="https://example.com/logo.png" />
</a>

CSS

nav a.logo {
  position: relative;
  ...
  display: inline-block;
  line-height: 0.0001em;
  font-size: 0.0001em;
}

nav a.logo img {
  position: relative; /* for z-index issues.  giving the image a relative
                         position automatically will place it above the
                         absolutely positioned :before element.  This is
                         because the before element is rendered before the
                         image */
}

nav a.logo:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 71px;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
  ...
}

演示：http://jsfiddle.net/ZP6LQ/1/show
资料来源：http://jsfiddle.net/ZP6LQ/1/

半透明图像挂出半透明div

4 个答案:

HTML

CSS