Question

我想在我的图片上放两行文字。在这里回答了类似的问题CSS/HTML : Putting up a text label on my image

＆＃13;

.imgHolder {
  position: relative;
}
.imgHolder span {
  position: absolute;
  right: 10px;
  top: 10px;
}

＆＃13;

<div class="imgHolder">
  <img src="https://www.google.com/images/srpr/logo11w.png" alt=""/>
  <span>Here's the overlay text<br>Second row</span>
</div>

＆＃13;

效果很好但我根本无法更改第二行的格式（文本大小）。一切都打破了文字的位置。：（

我也无法理解span标记在外部CSS中是如何工作的。

有人可以帮忙吗？

Answer 1

解决方案：https://jsfiddle.net/xwfsxkrt/

HTML：

<div class="imgHolder">
  <img src="https://www.google.com/images/srpr/logo11w.png" />
  <span class="top">Here's the overlay text</span>
  <span class="bottom">Second row</span>
</div>

CSS：

.imgHolder {
  position: relative;
}
.imgHolder span.top {
  position: absolute;
  right: 10px;
  top: 10px;
  background-color:green;
}
.imgHolder span.bottom{
  position: absolute;
  right: 10px;
  top: 30px;
  background-color:yellow;
}

我添加了background-color作为证据，您可以根据需要设置每一行的样式。 span在CSS中的工作方式与其他任何方式相同，唯一的问题是区分两行，这需要两个span类。

Answer 2

1：使用＆＃39; float：left＆＃39;对于div。现在div延伸到页面的整个宽度，这意味着文本将在页面右侧浮动绝对（因为这是div的边缘）。宽度浮动：左边的div将与内容一样宽。这意味着div的边缘将是图像的边缘。

将文本放在div（＆＃34; textholder＆＃34;）中进行定位，而不是定位＆＃39; span＆＃39;在彼此之下，这更麻烦。
为第一行和第二行文本制作单独的跨度和类/样式。

结果：

＆＃13;

.imgHolder {
  position: relative;
    float: left;
}
.textholder {
    position: absolute;
    right: 10px;
    top: 10px;
}
.textholder span.top {
  font-size: 14px;
  background-color:green;
}
.textholder span.bottom{
  font-size: 10px;
  background-color:yellow;
}

＆＃13;

<div class="imgHolder">
<img src="https://www.google.com/images/srpr/logo11w.png" />
    <div class="textholder"><span class="top">Here's the overlay text</span><br><span class="bottom">Second row</span></div>
</div>

＆＃13;

CSS / HTML在我的图像上放置两行文本

2 个答案: