Question

我有一个背景图片，其中包含粉笔板，我在文件板上添加文字，但文字必须是HTML格式，不能成为图片的一部分。

我的问题是，根据屏幕尺寸，背景图像的变化，以及图像中粉笔板的位置也会发生变化。

HTML

<div class="main">
  <div class="html-content">
   <p>Test content</p>
  </div>
</div>

CSS

.main {
  background-image: url('https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/0kjHIH6/videoblocks-cartoon-blackboard-in-a-children-classroom-with-a-school-bus_rp7t1bnse_thumbnail-full01.png');
  height: 500px;
  width: 800px;
  background-size: cover;
  position: relative;
}

.html-content {
  position: absolute;
  top: 20%;
  left: 50%;
}

.html-content p {
  color: white;
  font-weight: bold;
}

How it looks like now

制作它的最佳方法是什么，无论粉笔板在图像的哪个位置，div都会位于其中。

Answer 1

由于您已经指定了主div的维度，因此指定内容div的维度也是有意义的。它们的位置是以百分比动态指定的，因此窗口的尺寸不应影响它们彼此的相对位置。

我将内部div对齐到黑板的中心，所以现在在整个板上写起来应该更容易。您可以切换内部div的边框，以查看其确切尺寸。

.main {
  background-image: url('https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/0kjHIH6/videoblocks-cartoon-blackboard-in-a-children-classroom-with-a-school-bus_rp7t1bnse_thumbnail-full01.png');
  height: 500px;
  width: 800px;
  background-size: cover;
  position: relative;
}

.html-content {
  position: absolute;
  top: 17%;
  left: 34%;
  width: 335px;
  height: 230px;
  text-align: center;
  /*border: 1px solid white;*/
}

.html-content p {
  color: white;
  font-weight: bold;
}

<div class="main">
  <div class="html-content">
   <p>Test content</p>
  </div>
</div>

使div始终适合静态图像部分

1 个答案: