Question

我的标题图片与我的文字重叠，这让我非常讨厌。另一个有缺陷的是我的徽标文本如何向图像中心倾斜。如果有人可以帮助我，那将是非常棒的。

这是我的代码： https://jsfiddle.net/c2bom0cc/1/

以下是我可能与此最相关的标签：

#index_header {
  position: block;
  z-index: 0;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

#index_header img {
  position: block;
  float: left;
  width: 100%;
  height: 100%;
}

.background_title {
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  color: #FFF;
  font-size: 64px;
  left: 50%;
  top: 50%;
}

<div class="page_container">
  <div id="index_header">
    <a href="#">
      <img alt="slider" id="index_headerimg" src="http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg"
      />
      <p class="background_title">G.F. Bakery</p>
    </a>
  </div>
</div>

Answer 1

如果您希望文字位于图片下方并居中，请删除以下代码：

.background_title {
position: absolute;
}

只需删除该位置即可将文字移动到图像下方并居中。

Answer 2

我让自己对你的代码做一些假设：

首先，根据图像的整个高度和宽度，我想你想要将图像作为拉伸的背景图像。因此，我在CSS Backgrounds中将<img>替换为background-image（background简写）。

根据您的问题，我发现您希望标题位于面包店背景的中心。

我没有得到图像重叠的文字。如果您想要图片下方的文字，请将其放在 <div id="index_header">...</div>之后的元素中，因为背景已遍及<div>。

我必须将display:inline-block添加到.background_title课程，以便vertical-align:middle;生效。

我删除了所有绝对定位，以便更好地处理所有对齐。绝对定位使您可以手动设置所有top和left，当代码变大时，这很难做到。

以下是您的新HTML：

<div class="page_container"> <div id="index_header"> <a href="#"> <p class="background_title">G.F. Bakery</p> </a> </div> <p>Some other content...</p> // this text will not be overlapped by // #index_header as long as #index_header // isn't absolutely positioned </div>

这是您的新CSS：

html, body{ // this is instead of having top:0 and left:0 in #index_header padding: 0; margin: 0; } .page_container { height: 100%; width: 100%; } #index_header { height: 200px; width: 100%; text-align: center; vertical-align: middle; background: url('http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg') no-repeat center center; background-size: 100% 100%; // this does the stretching } .background_title { display:inline-block; // this is to apply the vertical-align of parent font-family: 'Montserrat', sans-serif; color: #FFF; font-size: 64px; }

这里是JSFiddle

希望这有帮助。

图像重叠文本和徽标不以图像顶部为中心

2 个答案: