Html 让文字显示在图片的上面
如题:
第一种方式便是将 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 让文字显示在图片的上面的更多相关文章
- CSS实现文字半透明显示在图片上方法
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
- j-query应用---鼠标悬停不同文字显示不同背景图片banner动画
源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- VS2003 下GridControl的列显示成图片+文字的形式实现
public RC_CustomerSolicitListUC() { // 该调用是 Windows.Forms 窗体设计器所必需的. InitializeComponent(); // TODO: ...
- Qt添加窗口背景图片、Label图片显示、、Label文字显示
一.添加窗口背景图片 重写MainWindow绘制事件 void MainWindow::paintEvent(QPaintEvent *event) { QPainter painter(this) ...
- c# ToolStrip控件图片和文字显示--原创
如上图达到这样的效果 首先我们给属性Image和Text分别赋予需要显示的图片和文字 然后设置DisplyStyle属性为ImageAndText,意为同时显示图片和文字 各种设置ImageAlign ...
- 第三方网站不能调用微信公众平台里的图片了 显示"此图片来自微信公众号平台未经允许不可引用"
下午ytkah在自己小博客搜索时看到有几篇文章图片显示不了,再访问一些网站时发现有些图片无法显示出来,显示"此图片来自微信公众号平台未经允许不可引用",如下图所示,这个应该是最近微 ...
- 完美解决 向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示...
效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...
- DataGridView单元格显示GIF图片
本文转载:http://home.cnblogs.com/group/topic/40730.html DataGridView单元格显示GIF图片 gifanimationindatagrid.ra ...
- QTbutton设置背景颜色和文字显示位置设置
QPushButton * pQBtn = new QPushButton( cBuff, this ); pQBtn->setStyleSheet("text-align: left ...
随机推荐
- Spring AOP(一)——基础概念
前文的一些内容更多是针对Spring容器内部的一些特性的描述,接下来一个专题将描述Spring AOP的一些信息,配置细节等等. 介绍 面向切面编程(AOP)是一种新的针对程序结构的思路,它补足了面向 ...
- Intellij Idea 2016服务破解方法
技术交流群:233513714 第一种破解方法 我使用的是官网下载的idea Ultimate版,也就是任何功能不受限制的版本,但是这个版本安装过后只能免费使用一个月. 当你的idea出现这种情况 也 ...
- PRO*C 函数事例 3 -- 游标使用
1.Oracle中的游标 Oracle使用两种游标: 显式游标和隐式游标. 不管语句返回多少条记录, Oracle为每条使用的SQL语句隐式地定义一个游标. Oracle为每个DELETE , ...
- PADS9.5打开Altium designer09的原理图
1. 打开PADS Logic原理图工具,文件---导入 2. 选择Protel DXP这个选项,找到相应的文件即可打开.
- ActiveMQ测试实例
ActiveMQ的安装与启动 1 下载ActiveMQ:http://activemq.apache.org/download.html 2 下载后解压到任意文件夹,解压后文件夹内的目录为: 3 进入 ...
- golang获取调用者的方法名及所在源码行数
package main import "runtime" import "log" func main() { test() } func test() { ...
- Android ImageSwitcher 配合Picasso解决内存溢出(OOM)问题
最近项目中用到了 ImageSwitcher 来实现图片切换,使用起来很简单,但发现当图片比较大(超过了3M)时,程序出现了内存溢出(OOM)问题而崩溃了. 原因就是图片太大了,显示到 ImageVi ...
- Eclipse中JS文件红叉处理
使用新版本的Eclipse 或者 MyEclipse,项目中的 JS文件出现红叉,让人觉得项目中存在错误代码,给人的感觉很不爽. 记录一下去掉红叉的方法: 第1步: 打开工作空间中的项目找到项目的 . ...
- 孤荷凌寒自学python第七十五天开始写Python的第一个爬虫5
孤荷凌寒自学python第七十五天开始写Python的第一个爬虫5 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 直接上代码.详细过程见文末屏幕录像 ...
- 给虚拟机发送键盘按键key
使用举例:virsh send-key 11 KEY_LEFTCTRL KEY_LEFTALT KEY_DELETE作用:发送"ctrl+alt+del"给虚拟机,linux虚拟机 ...