Question

当我调整浏览器大小时，我一直在尝试将文本保留在图像中。我也试过漂浮它。

<div class="image">
<img src="background2.jpg">
<h1>Hello</h1>
</div>

这是CSS

.image img{
    width: 90%;
    display: block;
    margin: auto;
    position: relative;
}
h1{
    position: absolute;
    top: 50%; 
    left: 50%; 
    width: 100%;
}

Answer 1

您希望父元素（.image）为position: relative，以便它h1相对于绝对定位的内容。您还可以为其指定以页面90％为中心的宽度和边距。然后使图像100％宽度的父级，并使用top: 50%; left: 50%; transform: translate(-50%,-50%);使文本垂直和水平绝对居中。

＆＃13;

.image {
  width: 90%;
  display: block;
  margin: auto;
  position: relative;
}

.image img {
  width: 100%;
  display: block;
}

.stuff {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

＆＃13;

<div class="image">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="stuff">
    <h1>Hello</h1>
    <h2>Foobar</h2>
  </div>
</div>

＆＃13;

Answer 2

您可以尝试将图像作为父div的背景：

MyStruct

css看起来像这样：

<div class="image">
  <h1>Hello</h1>
</div>

如何在调整浏览器大小时避免文本远离图像？

2 个答案: