Question

我保留了原始问题，因为问题仍然存在。在图像上放置文本是一个巨大的问题：

1）浮动解决方案并不真正合适。 Float实际上破坏了wordpress主题标记-确实非常糟糕。不幸的是，切换主题不是一个选择。

2）背景图像未正确设置图像尺寸。跨度没有固定的高度，因此不应具有固定的高度。

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

但在我的图像上却不是复活节快乐文本。

!!!重要!!!

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

Answer 1

好的，另一种选择是改为使用div标签删除图片标签。

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

比只是使用

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

Answer 2

你的意思是这样吗？

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

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

Answer 3

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

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

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

Answer 4

花了更多的时间并稍微重写了一些代码，但我设法使用浮点数使它正常工作。

必须添加js进行大小调整，并且有些“文本在图像上工作”。

Can't post an answer without code again

可以在这里找到新代码：http://jsfiddle.net/mdLvyn1g/29/

!!!!重要!!!!

我非常不确定js，我已经写过，非常欢迎您提供帮助和提示。

图像上的HTML和CSS Positionong文本

4 个答案: