CSS中以图片替换文字的表现方法

css

  今天有个朋友做网页的时候遇到个问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇到过这个问题,这里我把常用的几个方法写出来,把思路也讲一下,希望能帮助刚开始学习的朋友。

  “以图换字”就是用图片替换文字表现。我们都知道,文字在浏览器里的表现形式是很差的,会有锯齿,没办法圆润还有没办法做很多效果。一般情况下网页的内容部分是不需要做效果的,但是在WEB标准中对于LOGO、标题,常常需要用到这些。用表格来做的话我们只是在某个地方帖上一张图,这样的方式比较简单,但是不利于搜索。所以我们需要采用标准方式来做,保证网页处于一种良好的状态而有利于搜索。通常以图片来替换文字,图片显示保留而文字则不可见。

  显示消失:(display:none;) 这不只是让容器内的内容消失而是包括容器本身都消失。所以我们必需在容器内再做一个容器来保证内消失部分之后,容器内的背景可以正常显示。例 :

<div id="logo">标题内容</div>
#logo {display:none; background:URL; width:300px; height:100px;}

  如果是这样写那么你根本什么也看不到。那正确的方式是什么写呢?看示例:

<div id="logo"><span>标题内容</span></div>
#logo {background:URL; width:300px; height:100px;}
#logo span {display:none;}

  大家注意上面的代码,背景是在#logo下定义,而#logo span下除了display:none;没有任何样式。因为被定义了display:none;属性的容器会一无所见,如果定义其它样式也是浪费。光是这样还是有问题,这是个没有链接的例子,那有链接的时候怎么办呢?我们再来看个例子:

<div id="logo"><a href="URL" title="标题">标题内容</a></div>
#logo {background:URL; width:300px; height:100px;}
#logo a {display:none;}

  大家猜一下这个代码能显示出东西吗?事实是背景显示了,可是链接没了。我们上面说过:被赋于了display:none;属性的容器自身也会消失。那我们就清楚了,必需要在这个A标签里加个容器。我们再看示例:

<div id="logo"><a href="URL" title="标题"><span>标题内容</span></a></div>
#logo {background:URL; width:300px; height:100px;}
#logo a span {display:none;}

  这样的是不是就正确了呢?还是不行,为什么呢,我们都知道A不是块级标签,也就是说A的高宽都是内容来决定的,现在内容消失了,也就没有了这个高宽的属性了,那么这个链接也就成了一个没有热区的链接了。可能是点不着的。我们必需要把上面的代码再做修改。

<div id="logo"><a href="URL" title="标题"><span>标题内容</span></a></div>
#logo a {background:URL; width:300px; height:100px; display:block;}
#logo a span {display:none;}

  注意这里的A标签的属性一定要加上display:block;把他强制为块级元素。这样A标签就成了一个宽为300高为100,有一个背景没有文字内容的链接形式。大家看到了上面在A标签里还加了一个span标签,好像有点多余。能不能不用span也可以实现效果呢。可以,不过思路就不一样了,而是下面的这种位置移动法。

  位置移动:也就是让内容啊分进行位置移动,移出显示区之外。我们还是看代码来了解这个方法。

<div id="logo"><a href="URL" title="标题">标题内容</a></div>
#logo, #logo a {width:300px; height:100px; overflow:hidden;}
#logo a {background:URL; padding:100px 0 0; display:block;}

  在CSS中设置了#logo与A有一个溢出隐藏(overflow:hidden;)也就是说有超出300*100大小的就会被隐藏。我们看A被定义了一个padding:100px 0 0; 这个顶部的内距正好把内容压到了显示区以外。那为什么#logo也要用overflow:hidden;呢?因为在IE下会出现一个小BUG,A的内容没办法溢出隐藏所以必需要在父级标签上还要加一个overflow:hidden;

  以上内容只是我比较常用的两种方法,当然还会有一些别的方式方法,这些方法都有各自的有缺点,不过各种方法之间也都有互补的。在应用时可以依据情况选择使用即可。

时间: 2024-10-04 12:32:00

CSS中以图片替换文字的表现方法的相关文章

如何用图片替换文字?

我们一般都是用一段文字替换另一段文字,但是你想过用图片替换文字吗,可能你以前没试过,因为你无法在"替换为"框中输入图片,事实上这是可以实现的. 它的操作方法是,首先把图片复制到剪贴板中,然后打开替换对话框,在"查找内容"框中输入将被替换的文字,接着在"替换为"框中输入"^c"(注意:输入的一定要是半角字符,c要小写),单击"替换"即可.

PPT文件中的图片和文字怎么做成一张图?

  PPT文件中的图片和文字怎么做成一张图?           1.打开ppt,在上部工具栏中,点击"插入--图片--来自文件". 2.在插入图片对话框中,按照图片存放的路径,选中图片,点击插入. 3.点击"插入--文本框--水平",在ppt页面上划出文本框,并在里面输入文字. 4.选中图片,右击鼠标,选择"叠放次序--置于底层",将文本框移动到图片上面. 5.调整好文字,再调整好图片和文字的关系,然后按住Ctrl键,选中文本框和图片,右击鼠标

PPT中使用图片填充文字的技巧

  PPT中使用图片填充文字的技巧          在本文中,Office办公助手的小编讲解一下用图片填充文字的效果的制作方法,这上面的文字和里面的图片都是可以变化的呢. 1.切换到"插入"选项卡,在"文本"组中找到"文本框"下面的"横排文本框",此时光标就变成了十字架形,在演示文稿中的合适位置拖动鼠标绘制一个横排文本框. 2.在文本框中输入自己想要的文字,并选中文字,在"开始"选项卡中更改文字的字体和字

CSS中背景图片定位方法

CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图

怎么用C#读取word文档中的图片和文字但不去除文字格式

问题描述 aspx后台代码怎么用C#读取word文档中的图片和文字保留文字格式,求详细代码和操作步骤,求教........ 解决方案 解决方案二:rtf富文本解决方案三:難........解决方案四:用编辑控件去网上找找...就像csdn这个回复的一样,当然这个不是很好的有更好的支持复制word的图片和文字..样式不会变的那种..解决方案五:不会...

如何在DropDownList中让图片和文字并列显示?

问题描述 如何在DropDownList中让图片和文字并列显示? 解决方案 解决方案二:不会帮顶解决方案三:孟子的blog中有,自己去看解决方案四:up绑定解决方案五:DropDownList中可以让图片和文字并列显示??解决方案六:htc解决方案七:http://dotnet.aspx.cc/article/c81ad80e-fc14-4ff8-85f3-16cc68811bd5/read.aspx解决方案八: 解决方案九:[img=][/img][img=][/img][img=][/img

使用伪元素来实现图片替换的两种方法

文章简介:伪元素与图片替换. WeBrebuild年会上分享的一点内容,知识点的内容就不作过多阐述了,如果你完全不了解伪元素那么建议先看一下官方伪元素选择器的资料,或者自行谷歌了解,有兴趣可以去看下这篇文章:使用伪元素实现CSS图片替换(NIR),对于图片替换有比较详细的介绍和追溯 . 先看一下通用的图片替换方法:Demo1 什么问题呢,文字被隐藏了,直接导致的结果就是当图片加载失败或者网速慢图片无法很快加载的时候,用户不知道这块区域的内容是什么,有什么功能. 为了避免出现这样的状况,文字就不能

点击recyclerview中的item使点击的item中的图片改变要用什么方法?

问题描述 点击recyclerview中的item使点击的item中的图片改变要用什么方法? 2C 求大神指点一下呀..点击recyclerview中的item使点击的item中的图片改变要用什么方法呢?最好有个小demo.. 解决方案 AndroidListView点击Item的时候 改变文字颜色和背景色

CSS中背景图片的定位

1. 关键字, 例如: background-position: top right; 优点: 直观, 可用性高, 各浏览器中表现一致. 缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制. 2. 像素, 例如: background-position: 0px 0px; 优点: 概念容易被理解, 只要