Question

我试图看看是否可以在图像上放置一些文字而不使用position：absolute或将图像作为元素的背景。
限制的原因是HTML代码进入电子邮件，事实证明hotmail既不支持也不支持我记得当我第一次开始学习CSS时，摆弄图像周围的浮动文本时，我常常最后快速地将图像传遍整个图像。可悲的是，我无法重现这种行为。

全文（编辑）：
我收到了图形设计师的精美布局。它基本上是一个很好的背景图片，标识链接到网站，基本上是中间的“文本到达”区域。
像往常一样，在这些情况下，我正在使用表来确保所有内容都保留在原位并运行crossbrowser + crossmailclient。
问题来自于中间的“文本到此处”区域不是白色矩形，而是具有一些背景图形。
经过一些测试，看起来Live Hotmail似乎不喜欢这两个位置：绝对或背景图像;相对利润也不好，因为它们会破坏其余的布局。

当前版本，适用于任何其他邮件客户端/网站：

...
<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>
...

当然，“这是不可能的”可能是一个完全可以接受的答案，但我希望不是;）

Answer 1

一旦表格出现，我就会一直拉这样的特技。非常丑陋，并且可能会严重篡改您运行它的任何验证器：重叠表格单元格。适用于大多数浏览器，甚至没有CSS。

示例：

<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>

我知道，我应该为此付出代价。

Answer 2

如果使用绝对定位，则应指定left和top属性。此外，您应该在某些父元素上设置position:relative;以使其成为图层，以便绝对定位将该元素用作原点。如果你没有指定原点，它可能是窗口，也可能是其他元素，你不知道绝对定位元素的最终位置。

还有一些其他替代方案可以将元素放在彼此之上，每个元素都有自己的限制。

您可以使用相对定位在图像上显示文字：

<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>

您可以在另一个元素中使用浮动元素将文本放在图像的顶部：

<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="" />

Answer 3

控制事物外观的最佳方法是使文本成为图像本身的一部分。当然，如果你使用像高压缩的jpeg这样的有损图像格式，它看起来真的很糟糕，但也许PNG会对你有用吗？或者，根据颜色的数量，gif可能会起作用。

这也为您提供一致的字体，过滤等。

Answer 4

您可以尝试设置负边距。除了最不复杂的布局外，这很难维护。负边际有效地“拉动”该方向的元素。

<img src="blah.jpg" height="100"/>
<div style="margin-top:-100px">
  blah blah blah
</div>

Answer 5

如果你有一个父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;
}

Answer 6

 .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>

如何在没有绝对定位的情况下将文本放在图像上或将图像设置为背景

6 个答案: