如题:

第一种方式便是将 image 作为背景图片,即:background-image:url(".......");

在此可以控制背景图片的横向和纵向的平铺:

background-repeat : none;  不进行平铺

background-repeat : repeat-x;  横向x轴进行平铺

background-repeat : repeat-y;  横向y轴进行平铺

background-repeat : repeat;  横向x轴与纵向y轴都进行平铺,这也是默认情况的状态

第二种方式是将img块与文字块放在同一个div 中,然后设置他们之间的位置,例如如下代码块:

<div style="position:relative;">

  <img src="...." />

  <div style="position:absolute; z-index:2; left:10px; top:10px">

    haha

  </div>

</div>

其余的位置再根据实际情况进行微调就好~~

关于position中relative 以及 absolute 属性值的区别:

position:absolute这个是绝对定位;
是相对于浏览器的定位。
比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如:<div class="1"></div><div class="2"></div>

当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position:relative;margin-left:20px;width:50px;
2的位置在1的右边,距离120px

更多请看: http://net08118.blog.163.com/blog/static/11011170420129193741264/

   http://blog.csdn.net/chhuma/article/details/7484940

如果想限制img 标签的最大宽高,可以用max-width 和 max-height 这两个属性,如下代码:

<img src="......" style="max-width:100px; max-height:100px" />

Html 让文字显示在图片的上面的更多相关文章

  1. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

  2. j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

    源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  3. VS2003 下GridControl的列显示成图片+文字的形式实现

    public RC_CustomerSolicitListUC() { // 该调用是 Windows.Forms 窗体设计器所必需的. InitializeComponent(); // TODO: ...

  4. Qt添加窗口背景图片、Label图片显示、、Label文字显示

    一.添加窗口背景图片 重写MainWindow绘制事件 void MainWindow::paintEvent(QPaintEvent *event) { QPainter painter(this) ...

  5. c# ToolStrip控件图片和文字显示--原创

    如上图达到这样的效果 首先我们给属性Image和Text分别赋予需要显示的图片和文字 然后设置DisplyStyle属性为ImageAndText,意为同时显示图片和文字 各种设置ImageAlign ...

  6. 第三方网站不能调用微信公众平台里的图片了 显示"此图片来自微信公众号平台未经允许不可引用"

    下午ytkah在自己小博客搜索时看到有几篇文章图片显示不了,再访问一些网站时发现有些图片无法显示出来,显示"此图片来自微信公众号平台未经允许不可引用",如下图所示,这个应该是最近微 ...

  7. 完美解决 向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示...

    效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...

  8. DataGridView单元格显示GIF图片

    本文转载:http://home.cnblogs.com/group/topic/40730.html DataGridView单元格显示GIF图片 gifanimationindatagrid.ra ...

  9. QTbutton设置背景颜色和文字显示位置设置

    QPushButton * pQBtn = new QPushButton( cBuff, this ); pQBtn->setStyleSheet("text-align: left ...

随机推荐

  1. Spring AOP(一)——基础概念

    前文的一些内容更多是针对Spring容器内部的一些特性的描述,接下来一个专题将描述Spring AOP的一些信息,配置细节等等. 介绍 面向切面编程(AOP)是一种新的针对程序结构的思路,它补足了面向 ...

  2. Intellij Idea 2016服务破解方法

    技术交流群:233513714 第一种破解方法 我使用的是官网下载的idea Ultimate版,也就是任何功能不受限制的版本,但是这个版本安装过后只能免费使用一个月. 当你的idea出现这种情况 也 ...

  3. PRO*C 函数事例 3 -- 游标使用

    1.Oracle中的游标    Oracle使用两种游标: 显式游标和隐式游标. 不管语句返回多少条记录, Oracle为每条使用的SQL语句隐式地定义一个游标. Oracle为每个DELETE , ...

  4. PADS9.5打开Altium designer09的原理图

    1. 打开PADS Logic原理图工具,文件---导入 2. 选择Protel DXP这个选项,找到相应的文件即可打开.

  5. ActiveMQ测试实例

    ActiveMQ的安装与启动 1 下载ActiveMQ:http://activemq.apache.org/download.html 2 下载后解压到任意文件夹,解压后文件夹内的目录为: 3 进入 ...

  6. golang获取调用者的方法名及所在源码行数

    package main import "runtime" import "log" func main() { test() } func test() { ...

  7. Android ImageSwitcher 配合Picasso解决内存溢出(OOM)问题

    最近项目中用到了 ImageSwitcher 来实现图片切换,使用起来很简单,但发现当图片比较大(超过了3M)时,程序出现了内存溢出(OOM)问题而崩溃了. 原因就是图片太大了,显示到 ImageVi ...

  8. Eclipse中JS文件红叉处理

    使用新版本的Eclipse 或者 MyEclipse,项目中的 JS文件出现红叉,让人觉得项目中存在错误代码,给人的感觉很不爽. 记录一下去掉红叉的方法: 第1步: 打开工作空间中的项目找到项目的 . ...

  9. 孤荷凌寒自学python第七十五天开始写Python的第一个爬虫5

    孤荷凌寒自学python第七十五天开始写Python的第一个爬虫5 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 直接上代码.详细过程见文末屏幕录像 ...

  10. 给虚拟机发送键盘按键key

    使用举例:virsh send-key 11 KEY_LEFTCTRL KEY_LEFTALT KEY_DELETE作用:发送"ctrl+alt+del"给虚拟机,linux虚拟机 ...