18

我正在尝试查看是否可以在不使用 position: absolute 或将图像作为元素背景的情况下将一些文本放在图像上。
限制的原因是 HTML 代码要进入电子邮件，而 hotmail 两者都不支持。
我记得当我第一次开始学习 CSS 时，在图像周围摆弄浮动文本时，我经常会发现文本在图像上到处都是欢快的。可悲的是，我无法重现这种行为。

全文（已编辑）：
我从图形设计师那里收到了精美的布局。它基本上是一张漂亮的背景图片，带有链接到网站的徽标，中间基本上是“文本到这里”区域。
在这些情况下，像往常一样，我使用表格来确保一切都保持原位并且可以跨浏览器+跨邮件客户端工作。
问题出在中间的“文本到这里”区域不是白色矩形，而是有一些背景图形。
经过一些测试，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>
...

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

4

6 回答 6

75

我过去常常一有桌子就拉出这样的特技。真的很难看，并且可能会让你运行它的任何验证器感到非常尴尬：重叠的表格单元格。可以在大多数浏览器中使用，即使没有 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>

我知道，我应该为此投反对票。

于 2009-12-02T00:17:43.037 回答
7

如果使用绝对定位，则应同时指定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="" />
于 2009-12-01T23:16:28.127 回答
3

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

<img src="blah.jpg" height="100"/>
<div style="margin-top:-100px">
  blah blah blah
</div>
于 2009-12-01T23:24:04.747 回答
2

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

这也为您提供了外观一致的字体、过滤等。

于 2009-12-01T23:02:13.317 回答
0

说如果你有一个父 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;
}
于 2014-12-19T10:52:36.640 回答
-1 

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

于 2019-07-08T18:20:15.057 回答