Question

平台：Wordpress（自托管）模板：TwentyTen

我已经能够通过谷歌搜索或修改样式表中熟悉的部分来解决大部分问题，但我现在陷入困境，希望有人可以帮助我。基本上，我想在设计（http://albertaspeechie.blogspot.com）中创建一个与此类似的标题，标题背景的那部分将是透明的。

如果我创建一个带有透明部分的图像，它会显示为白色，因为它仍然位于带有白色背景的标题/包装中。

我认为可能将标题背景设置为透明（虽然我无法弄清楚如何使标题透明，而不影响包装的其余部分）并在包装器上方增加填充。并增加标题的高度。我曾经知道如何增加标题的高度，但我似乎无法在任何地方找到它。

关于我如何做到这一点的任何建议？我目前只是在测试博客上笨拙，所以没有发布的网站。这只是一个直接的二十分，没有任何调整，直到我能弄清楚如何做一个部分透明的标题。

提前致谢。

编辑：我不确定为什么人们会贬低这一点。我遵守了规则和指示。

Answer 1

您可以使用定位将图像移到标题之外。

将要使用的图像添加到标题内。确保图像具有透明背景 - 例如使用png文件。
将position: relative添加到标题
将position: absolute添加到图像，然后提供图像的坐标。

要将其置于标题之外，请为top提供负值。要使图像居中，请将0添加到left和right，然后使用margin: auto.

.header img {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  margin: auto;
}

body, html {
  height: 100%;
  padding: 0;
  margin: 0;
  background: lightblue;
}

.wrapper {
  margin: 0 auto;
  width: 50%;
  height: 100%;
  background-color: lightyellow;
  margin-top: 150px;
}

.header {
  background-color: white;
  width: 100%;
  height: 200px;
  position: relative;
}

.header img {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="header">
    <img src="http://placehold.it/250x250" alt="" />
  </div>
</div>

Codepen Demo

详细了解定位here。

Wordpress - 在包装器

1 个答案: