CSS

Question

我正在尝试让文本停留在响应式图片上的同一位置。

我的HTML是：

<div class="container">
    <img src="http://i.imgur.com/K6XP6tp.png" alt="">
    <div class="counter">
        <span class="days">1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <div class="counter2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</div>

CSS：

.container {
    position: relative;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
   height: auto;
}

.days {
    position: absolute;
    top: 30%;
    left: 50%;
}

.counter span {
    font-size: 25px;

}

无法完成这项工作。我创建了一个 jsfiddle。任何想法如何使这项工作？

Answer 1

您应该从 flux 中的图像执行此操作，这样它的容器（这里是 body）就可以增长。

那么你的 30% 就是有效率的（下面的代码片段中使用了 25%）。 :):

.container {
  position: relative;
}
.container img {
  display: block;
  width: 100%;
}
.days {/* other spans to position through coordonates as well */
  position: absolute;
  top: 25%;
  left: 50%;
}
[class*="counter"] span {
  font-size: 25px;
  position: absolute;
}

<div class="container">
  <img src="http://i.imgur.com/K6XP6tp.png" alt="">
  <div class="counter">
    <span class="days">1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div class="counter2">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>

CSS - 使文本在响应图像上停留在同一位置

CSS - make text stay on same place on responsive image

html

css-position