Html 如何在没有绝对定位的情况下将文本放在图像上或将图像设置为背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1829541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put text over an image without absolute positioning or setting the image as backbround
提问by Agos
I'm trying to see if it is possible to put some text over an image without using position: absolute or having the image being, the background of an element.
The reason for the constraints is that the HTML code is going into an e-mail, and it turns out that hotmail supports neither.
I remember that when I first began studying CSS, fiddling around with float-ing text around images I often ended up with the text merrily going all over the image. Sadly, I can't reproduce that behavior.
我想看看是否可以在不使用 position: absolute 的情况下将一些文本放在图像上：绝对或使图像成为元素的背景。
限制的原因是 HTML 代码要进入电子邮件，而事实证明 hotmail 不支持。
我记得当我第一次开始学习 CSS 时，在图像周围摆弄浮动文本时，我经常以文本快乐地遍布整个图像而告终。可悲的是，我无法重现这种行为。
Full story (edited in):
I received a fancy layout from the graphics designer. It's basically a nice background picture, with logos linking to websites and what basically is a "text goes here" area in the middle.
As usual in these cases, I'm using tables to make sure that everything stays in place AND works crossbrowser+crossmailclient.
The problem arises from the fact that the middle "text goes here" area is not a white rectangle, but has a some background graphics.
Having made some test, it appears that Live Hotmail does not seem to like neither position: absolute or background-image; relative margins are also not good because they'd ruin the rest of the layout.
全文（已编辑）：
我从图形设计师那里收到了一个精美的布局。它基本上是一个不错的背景图片，带有链接到网站的徽标，中间基本上是“文本在此处”区域。
在这些情况下，像往常一样，我使用表格来确保一切都保持原位并且可以跨浏览器+跨邮件客户端工作。
问题出在中间的“文本在此处”区域不是白色矩形，而是有一些背景图形。
经过一些测试，Live Hotmail 似乎不喜欢这两个位置：绝对或背景图像；相对边距也不好，因为它们会破坏布局的其余部分。
Current version, works in any other mail client/website:
当前版本，适用于任何其他邮件客户端/网站：
...
<td>
<img src='myimage.jpg' width='600' height='400' alt=''>
<p style="position: absolute; top: 120px; width: 500px; padding-left: 30px;">
blablabla<br>
yadda yadda<br>
</p>
</td>
...
Of course, “it's not possible” could be a perfectly acceptable answer, but I hope not ;)
当然，“这不可能”可能是一个完全可以接受的答案，但我希望不是 ;)
回答by Zano
I used to pull stunts like this all the time as soon as tables came. Really ugly, and may seriously embarass any validator you run it trough: overlapping table cells. Works in most browsers though and even without css.
我以前一到桌子就一直做这样的特技表演。真的很难看，并且可能会让您运行它的任何验证器严重尴尬：重叠表格单元格。尽管可以在大多数浏览器中使用，甚至可以在没有 css 的情况下使用。
Example:
例子：
<table>
<tr>
<td></td>
<td rowspan=2><img src="//i.stack.imgur.com/XlOi4.png"></td>
</tr>
<tr>
<td colspan=2>This is the overlay text</td>
</tr>
</table>I know, I deserve a downvote for this.
我知道，我应该为此投反对票。
回答by Guffa
If you use absolute positioning, you should specify both the leftand topattributes. Also, you should set position:relative;on some parent element to make it a layer, so that the absolute positioning uses that element as origin. If you don't specify the origin, it may be the window or it may be some other element, and you don't know where your absolutely positioned element will end up.
如果使用绝对定位，则应同时指定 theleft和top属性。此外，您应该设置position:relative;某个父元素使其成为一个图层，以便绝对定位使用该元素作为原点。如果您不指定原点，则它可能是窗口或其他元素，并且您不知道绝对定位的元素将在哪里结束。
There are some other alternatives to place elements on top of each other, each with their own limitations.
还有一些其他的替代方法可以将元素放在彼此的顶部，每个都有自己的限制。
You can use relative positioning to make text display on top of an image:
您可以使用相对定位在图像顶部显示文本：
<img src="..." alt="" />
<div style="position:relative;top:-50px;">
This text will display 50 pixels higher than it's original position,
placing it on top of the image. However, the text will still take up
room in it's original position, leaving an empty space below the image.
</div>
You can use a floating element inside another element to put text on top of an image:
您可以使用另一个元素内的浮动元素将文本放在图像顶部：
<div>
<div style="float:left;">
This text will be on top of the image. The parent element
gets no height, as it only contains floating elements.
However, IE7 and earlier has a bug that gives the parent
element a height anyway.
</div>
</div>
<img src="..." alt="" />
回答by Andy West
The best way to control the look of things would be to make the text part of the image itself. Of course, if you use a lossy image format like jpeg with high compression it could look really bad, but maybe a PNG will work for you? Or, depending on the number of colors, a gif might work.
控制事物外观的最佳方法是将文本作为图像本身的一部分。当然，如果您使用高压缩率的 jpeg 等有损图像格式，它可能看起来非常糟糕，但也许 PNG 适合您？或者，根据颜色的数量，gif 可能会起作用。
This also gives you consistent-looking fonts, filtering, etc.
这也为您提供了外观一致的字体、过滤等。
回答by G-Wiz
You can try setting negative margins. This is very difficult to maintain in all but the least complex layouts. A negative margin effective "pulls" the element in that direction.
您可以尝试设置负边距。除了最不复杂的布局之外，这在所有布局中都很难维护。负边距有效地在那个方向“拉”元素。
<img src="blah.jpg" height="100"/>
<div style="margin-top:-100px">
blah blah blah
</div>
回答by River CR Phoenix
say if you have a parent div and an image and paragraph inside it, give position "relative" to all three of them, and give "z-index" to children, say "20" image and and "21" to Text. the text will appear over the image. and you can adjust the text with "top or left or right or bottom"
假设你有一个父 div 和一个图像和段落，给他们三个“相对”位置，给孩子“z-index”，说“20”图像和“21”给文本。文字将出现在图像上。您可以使用“顶部或左侧或右侧或底部”调整文本
CSS
#learning{
margin: 0px;
padding:0px;
height: auto;
width: 100%;
position: relative;
}
#learning>img{
width:inherit;
height:inherit;
margin: 0px;
display: block;
position: relative;
z-index: 20;
}
#learning > p{
font-family: 'droid_serifitalic';
color: white;
font-size: 36px;
position: relative;
top:470px;
left:500px;
z-index: 21;
}
回答by Salman Khan
.main_image{grid-area: overflow;}
.main_text{
grid-area:overflow;
color: white;
margin: auto auto auto 5%;
font-size: 2rem;
line-height: 3rem;}
.main{
display: grid;
grid-template-columns: 1fr;
grid-template-rows:1fr;
grid-template-areas: "overflow";
} <div class="main">
<div class="main_image">
<img src="https://images.unsplash.com/photo-1548783300-70b41bc84f56?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" style="width:100%; height:auto">
</div>
<div class="main_text">
<p>overlap text</p>
<h2>your text</h2>
<p>lorem ipsum lorem lorem</p>
</div>
</div>
