微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我试图看看是否可以在图像上放置一些文字,而不使用position:absolute或图像是元素的背景.
限制的原因是 HTML代码正在进入电子邮件,事实证明,Hotmail既不支持.
我记得,当我第一次开始学习CSS时,围绕图像浮动文字,我经常结束文字,快乐地遍历整个图像.可悲的是,我不能重现这种行为.

全文(编辑):
我从图形设计师那里收到了一个奇特的布局.它基本上是一个很好的背景图片,徽标链接到网站,基本上是一个“文本到这里”区域在中间.
像这些情况一样,我正在使用表格来确保所有内容都保持原样,并且可以使用crossbrowser的crossmailclient.
问题起因于中间的文字到这里”区域不是一个白色的矩形,而是有一些背景图形.
进行了一些测试后,Live Hotmail似乎并不喜欢任何位置:absolute或background-image;相对利润也不好,因为它们会破坏其余的布局.

当前版本,可在任何其他邮件客户端/网站上工作:

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

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

解决方法

一旦桌子来了,我一直在这样拉扯这样的特技.真的很丑,并且可能会严重地尴尬你运行它的任何验证器:重叠的表格单元格.大多数浏览器都可以使用,甚至没有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>

我知道,我值得一提的是这个.

原文地址:https://www.jb51.cc/html/227999.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐