HTML 和 CSS 在图像上定位文本答案

【问题标题】：HTML and CSS Positionong text over imageHTML 和 CSS 在图像上定位文本
【发布时间】：2019-03-24 03:41:14
【问题描述】：

我保留了原来的问题，因为问题仍然存在。在图像上定位文本是一个大问题：

1) 浮动解决方案不是很合适。 Float 实际上破坏了 wordpress 主题标记——这真的很糟糕。不幸的是，切换主题不是一种选择。

2) 背景图片未正确设置图片大小。 Span 没有固定的高度，也不应该有固定的高度。

3) 绝对位置是一种方式，但据我所知，这是一种非常糟糕的方式。

4) 再次结合绝对位置、弹性、浮动、相对位置不会产生任何结果，因为标记会被破坏。

我没有选择，但我仍在尝试。

每个人都不会太严厉地评价我，但我被困住了。我写了一个代码可以在这里找到：

http://jsfiddle.net/mdLvyn1g/

该代码是我的 Wordpress 主题的一部分，它是全角的。 css里面的.entry-header其实是需要的，不用介意。示例中的图像可能无法正常工作，因此我创建了：

http://jsfiddle.net/mdLvyn1g/3/

这里的图像应该可以工作。

无论如何，我的主要问题是我无法在图像上放置文字正确。

我尝试过：绝对定位，为文本创建背景图像，网格布局，摆弄 css，我能想到的一切，但是我所有的尝试都以你在小提琴中看到的或一切结束休息。

也请不要太用力地判断两个单独的表，但这是一个我能想到的唯一一件事就是让我的layoyt看起来像：

http://jsfiddle.net/mdLvyn1g/4/

我很确定应该重写整个 html，但没有想法我应该从哪个方向开始。

!!!重要！！！应保留右侧或左侧的文字。图片保持合适的细胞。我真正需要的是一个新的文本（颜色不问题）将在图像上方。

类似：

http://www.pimpmaspace.com/Images/Holidays/graphics/img_text_13.gif

但是在我的图片上，显然不是复活节快乐的文字。

!!!重要!!!

在图片本身上方放置文字并不是什么大问题。大问题是保持其他一切完好无损。有点意思奇怪的文本/图像顺序，并在图像上方添加文本。

【问题讨论】：

现在的问题有点过时了。以下所有答案在一定程度上有助于找到一个可行的解决方案，该解决方案也作为答案发布，以保持问题和解决方案分开

标签： html css layout

【解决方案1】：

你的意思是这样的吗？

https://jsfiddle.net/Daandeve/mdLvyn1g/15/

.wrapped-text-one {
color: white;
position: absolute;
top: 45%;
left: 38%;
transform: translate(-50%, -50%);
}

【讨论】：

类似的东西，保留黑色文本。绝对和相对定位实际上破坏了一切

【解决方案2】：

我不是 100% 确定你在问什么，但如果你要求从图像上的表格单元格中获取文本并将其对齐到顶部，那么我设法在下面的小提琴中为你做到了，你可以看到代码：

#headingOne {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
}

http://jsfiddle.net/Domz44/j3zausq6/

【讨论】：

还有一些类似的东西，但是在您的示例中图像尺寸被破坏了

【解决方案3】：

好的，其他选项是删除图像标签，而不是我们的 div 标签。

https://jsfiddle.net/Daandeve/nogr891j/4/

不仅仅是使用

background: url(https://ichef.bbci.co.uk/news/960/cpsprodpb/048E/production/_103566110_gettyimages-601066840.jpg) repeat;

【讨论】：

【解决方案4】：

返工：

最终，答案仍然不是最初所期望的，并且仍然存在一些错误。此外，实际解决方案对页面布局高度依赖，因此可能根本无法适应。

文本的定位主要由两部分组成：

HTML - 图像和文本的单一包装：

<div class="test-wrapper">
  <img class="wrapped-img" src="https://cdn.allwallpaper.in/wallpapers/1920x1200/14340/animals-feline-forests-tigers-1920x1200-wallpaper.jpg" />
  <div class="img-title">It works</div>
</div>

描述整个事物的 CSS 的一部分：

.test-wrapper {
  position:relative;
  float: left;
  width: 100%;
  height: auto;
}

.img-title {
  position: absolute;
  left: 25%;
  top: 25%;
  color: red;
  font-size: 56px;
}

.wrapped-img {
  width: 100%;
  height: auto;
}

可以看出，文本的定位最终还是归结为绝对定位。

考虑到一切，实际调整大小效果很好。

完整的问题比仅仅在图像上放置文本更广泛。

除了图像本身之外，图像的右侧或左侧还有文字 - 基本上是一张表格。问题的一部分还包括调整上述文本的大小，并在屏幕变得相当小的时候移动它。

完整解决方案结构的大致轮廓是：

<div class="wrapper">
  <div class="row-wrapper">
    <div class="column-wrapper column-left column-60-percent">
    ......
    </div>
    <div class="column-wrapper column-right column-40-percent">
    .....
    </div>
 </div>
 <div class="row-wrapper">
 ....
 </div>
</div>

调整整个大小的实际 js 代码非常小，但高度依赖于布局。

$(window).resize(function() {
  if ($(window).width() <= 373) {
    $('.column-wrapper.column-left.column-40-percent').remove().insertAfter($('.column-wrapper.column-right.column-60-percent'));
  } else {
    $('.column-wrapper.column-left.column-40-percent').remove().insertBefore($('.column-wrapper.column-right.column-60-percent'));
  }
})

仍然可以在以下位置找到包含所有 CSS 的完整示例：http://jsfiddle.net/mdLvyn1g/29/

重要的旁注：

到目前为止，我仍然不确定整个事情。解决方案似乎有效，甚至可以更改文本颜色，但是调整大小仍然存在错误，因为文本绝对位于图像上方。

JS 部分看起来还不错，但我可能错了

【讨论】：

有人可以澄清一下 js 是好的还是真的很糟糕 - 就像一切都坏了？