图换文字效果:任意标签,均可插入图片
来源:互联网 发布:网络兼职公司 编辑:程序博客网 时间:2024/05/22 16:57
在写页面时,大多数人初级入门学习网页制作的人,在选择插入logo.png图片时,一般都会选择采用<img src="" alt="">直接插入图片的形式,虽然那样可以达到一定效果,但是这里介绍一种其他的小技巧插入图片。
这里先写这样一句代码:
<div class="header"> <h1>我爱写页面</h1> </div>
如果我们想要插入图片时,一般还会选择在h1标签样式中加入
background:url(images/logo.png)
如果我们不写文字的话,h2标签可能不会显示,但是如果我们写了文字,该如何去除文字呢?
h1{ width: 221px; height: 68px; background: url(images/logo.png) no-repeat; line-height:400px;/*可以将文字清除*/ overflow:hidden; }
参见以上代码,我们可以给文字行高设置无限大,再加上overflow:hidden,就可以去除文字,这种写法可能会存在一些问题,比如说在高度设置一定时,文字可能会偏移,那么我们该怎么办呢?
h1{ width: 221px; height: 68px; background: url(images/logo.png) no-repeat; text-indent:-999em;/*文字缩进目的是清除文字*/ overflow:hidden; }
参见以上代码仅仅是一行文字不一样,text-indent的目的是将文字无限缩进,这里没有高度限制。
效果如下:
总结:根据以上,在某些情况,我们不想通过img标签插入图片时,可以选择采用这种方法,优点是,任意标签均可插入图片O(∩_∩)O~~
阅读全文
0 0
- 图换文字效果:任意标签,均可插入图片
- fck_editor 不采用正则表达式实现插入任意自定义图片标签的解决方法
- 图片显示文字效果
- Photoshop 意境文字效果图片制作
- 如何在窗体中插入图片标签
- Qt 在word 标签处插入图片
- 认识<img>标签,为网页插入图片
- 认识<img>标签,为网页插入图片
- 利用HTML5 figure标签插入图片
- 维度及长度均可任意变形的动态数组
- 维度及长度均可任意变形的动态数组
- jsonObject.getString()解析任意字段均可强转为string
- css实现图片上漂浮着文字效果
- Android Apps GridView的图片加文字效果
- 在ios中实现图片环绕文字效果
- 鼠标移动显示 div 图片 文字效果
- css图片上漂浮着文字效果
- 怎么在图片上做文字效果
- MQTT协议学习笔记(转载)
- 《辛雷学习方法》读书笔记——第三章 身体
- MD5 标准C++实现
- 全排列算法的java实现
- 完整版百度地图点击列表定位到对应位置并有交互动画效果demo
- 图换文字效果:任意标签,均可插入图片
- promise用法详解(写的很好)
- SparkStreaming在启动执行步鄹和DStream的理解
- 廖雪峰git读书笔记--添加远程库
- hibernate 乐观锁与悲观锁的实现
- jenkins中对was的部署支持
- leetcode -- 459. Repeated Substring Pattern【java细节优化 + 模式规律 + 数字规律排除 】
- ViewPager概述
- Vue实例 -构造器