以图换字的几个方法及思路

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

“以图换字”就是用图片替换文字表现。我们都知道,文字在浏览器里的表现形式是很差的,会有锯齿,没办法圆润还有没办法做很多效果。一般情况下网页的内容部分是不需要做效果的,但是在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;

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

(0)

相关推荐

  • 以图换字的几个方法及思路

    今天有个朋友做网页的时候遇到个问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉.我想很多学标准的朋友都遇到过这个问题,这里我把常用的几个方法写出来,把思路也讲一下,希望能帮助刚开始学习的朋友. "以图换字"就是用图片替换文字表现.我们都知道,文字在浏览器里的表现形式是很差的,会有锯齿,没办法圆润还有没办法做很多效果.一般情况下网页的内容部分是不需要做效果的,但是在WEB标准中对于LOGO.标题,常常需要用到这些.用表格来做的话我们只是在某个地方帖上一

  • js中字符型和数值型数字的互相转化方法(必看)

    数值型的数字字符型数字之间如何互相转化呢,其实有个很简便的方法: 比如字符串"123.45"和数值型123.45. 字符串型只要在前面加个+好就可以了. 数值型只要在后面加个空字符串""就可以了. 上图: 以上这篇js中字符型和数值型数字的互相转化方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jQuery实现将页面上HTML标签换成另外标签的方法

    本文实例讲述了jQuery实现将页面上HTML标签换成另外标签的方法.分享给大家供大家参考.具体分析如下: 替换前代码如下: <code> A </code> <code> B </code> <code> C </code> 替换后代码如下: <pre> A </pre> <pre> A </pre> <pre> A </pre> 实现替换代码: 复制代码 代码

  • JS判断字符串变量是否含有某个字串的实现方法

    JS判断字符串变量是否含有某个字串的实现方法 varCts = "bblText"; if(Cts.indexOf("Text") > 0 ){ alert('Cts中包含Text字符串'); } indexOf用法: 返回 String 对象内第一次出现子字符串的字符位置. strObj.indexOf(subString[, startIndex]) 参数 strObj 必选项.String 对象或文字. subString 必选项.要在 String 对

  • php实现图片添加描边字和马赛克的方法

    本文实例讲述了php实现图片添加描边字和马赛克的方法.分享给大家供大家参考.具体实现方法如下: 马赛克:void imagemask ( resource image, int x1, int y1, int x2, int y2, int deep) imagemask() 把坐标 x1,y1 到 x2,y2(图像左上角为 0, 0)的矩形区域加上马赛克. deep为模糊程度,数字越大越模糊. 描边:void imagetextouter ( resource image, int size,

  • Windows下Anaconda安装、换源与更新的方法

    Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.当你尝试pip install xxx时出现各种意外和依赖问题,那么conda就是一方良药.可以让你轻松的安装各种库并处理各种依赖问题. Anaconda安装 可以从官网下载,不过服务器在国外,所以很慢.推荐使用国内镜像网站:清华大学开源镜像站:https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/,下载后一直next下去安装完

  • 浅谈C#手机号换成111XXXX1111 这种显示的解决思路

    如下所示: String subStr=phone.Substring(3,4); oldcellphone.Text = phone.Replace(subStr,"****"); /// <summary> /// 替换手机号中间四位为* /// </summary> /// <param name="phoneNo"></param> /// <returns></returns> pro

  • 怎样在html文档里做隔行换色的多行方法

    既然你都知道是隔行换色了,那就隔行换色就是了.方法很多. 最直接的在每一行的<tr>上直接加bgcolor="red". 用css的话就定义行二个颜色的类.在每一行交替使用这个类就是了.如: tr class="trClass1" tr class="trClass2" New Document table{ width:100%; } .t1{ background:#ff6600; color:black; } .t2{ back

  • 使用Java设置字型和颜色的方法详解

    Java绘图中,显示文字的方法主要有三种: (1)drawString(String str,int x,int y):在指定的位置显示字符串. (2)drawChars(char data[],int offset,int length, int x, int y):在指定的位置显示字符数组中的文字,从字符数组的offset位置开始,最多显示length个字符. (3)drawBytes(byte data[],int offset,int length,int x,int y), 在指定的位

  • 局域网用户的限制和反限制设置方法与思路分析

    可能现在对局域网上网用户限制比较多,比如不能上一些网站,不能玩某些游戏,不能上MSN,端口限制等等,一般就是通过代理服务器上的软件进行限制,如现在谈的最多的ISA Server 2004,或者是通过硬件防火墙进行过滤.下面谈谈如何突破限制,需要分限制情况进行说明: 一.单纯的限制某些网站,不能访问,网络游戏(比如联众)不能玩,这类限制一般是限制了欲访问的IP地址. 对于这类限制很容易突破,用普通的HTTP代理就可以了,或者SOCKS代理也是可以的.现在网上找HTTP代理还是很容易的,一抓一大把.

随机推荐