Question

所以，我正在尝试创建一个布局，其中段落标记应始终与背景图像的特定部分对齐。

与工作示例https://codepen.io/marcelcruz/pen/BRgaVL

相关联

我希望文本总是在水晶球内部，但是一旦我调整窗口大小，背景就会缩小，水晶球就会上升而且它们不再对齐。

有没有办法让背景只在两侧缩小，而不是在顶部和底部？还有其他更好的方法吗？

这段代码看起来像这样：

* {
  padding: 0;
  margin: 0;
}

body {
  background: url("https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg") no-repeat;
  background-size: cover;
  height: 100vh;
}

#text {
  color: red;
  background: yellow;
  width: 60px;
  position: absolute;
  top: 900px;
  left: 50%;
}

<div id="main">

    <p id="text">TEXT COMES HERE</p>

</div>

谢谢！

Answer 1

<html>
<head>
<style>
body {
  background: url("https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg") no-repeat;
  background-size: 100% 100%;
}

#text {
  color: red;
  background: yellow;
  width: 60px;
  position: absolute;
  left: 50%;
  top: 80%;
  }
</style>
</head>
<body>
<div id="main">

  <p id="text">TEXT COMES HERE</p>

</div>
</body>
</html>

当您设置background-size：100％100％;

时，它可以正常工作

还有什么？点击link_for_more

Answer 2

这可以通过<img>标记和相对定位来完成，例如

.container img {
  max-width: 100%;
}

.img-container {
  display: inline-block;
  position: relative;
}

.positioning {
  position: absolute;
  left: 45%;
  bottom: 30%;
  background-color: red;
  color: white;
  padding: 4px;
  font-size: 17px;
  line-height: 18px;
}

<div id="container" class="container">
  <div class="img-container">
    <div class="positioning">
      Some Text
    </div>
    <img src="https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg" />
  </div>
</div>

希望这有帮助！

保持元素与背景对齐

2 个答案: