以图换字的几个方法及思路
作者:小毅 来源:蓝色理想 发布时间:2007-10-17 18:07:00
今天有个朋友做网页的时候遇到个问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇到过这个问题,这里我把常用的几个方法写出来,把思路也讲一下,希望能帮助刚开始学习的朋友。
“以图换字”就是用图片替换文字表现。我们都知道,文字在浏览器里的表现形式是很差的,会有锯齿,没办法圆润还有没办法做很多效果。一般情况下网页的内容部分是不需要做效果的,但是在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;
以上内容只是我比较常用的两种方法,当然还会有一些别的方式方法,这些方法都有各自的有缺点,不过各种方法之间也都有互补的。在应用时可以依据情况选择使用即可。


猜你喜欢
- 目录一、socketserver实现并发二、验证客户端合法性一、socketserver实现并发tcp协议的socket是只能和一个客户端通
- collections是Python内建的一个集合模块,提供了许多有用的集合类。这里举几个例子:namedtuple我们知道tuple可以表
- 一、YOLOv5简介YOLOv5是一种目标检测算法,由ultralytics公司开发。它采用单一神经网络同时完成对象识别和边界框回归,并使用
- Mysql的Bin log数据恢复:不小心删除数据库前言:因为不小心删除了测试机器上Mysql的一整个数据库Schema,因为是测试机所以没
- Go语言中strconv包实现了基本数据类型和其字符串表示的相互转换。strconv包实现了基本数据类型与其字符串表示的转换,主要有以下常用
- 常用的消息摘要算法有MD5和SHA,这些算法在python和go的库中都有,需要时候调用下就OK了,这里总结下python和go的实现。一、
- pandas读取、写入csv数据非常方便,但是有时希望通过excel画个简单的图表看一下数据质量、变化趋势并保存,这时候csv格式的数据就略
- 实验环境:tensorflow版本1.2.0,python2.7介绍惯例先展示函数:tf.nn.conv2d(input, filter,
- 上一篇内容,已经学会了使用简单的语句对网页进行抓取。接下来,详细看下urlopen的两个重要参数url和data,学习如何发送数据data一
- 运行平台: WindowsPython版本: Python3.xIDE: Spyder今天我们想实现的功能是对单个目标图片的提取如图所示:图
- declare @name varchar(50)exec sp_executesql N'select @value=姓名 fro
- 前言MYSQL Command Line Client是一款用于输入密码的程序,相信大多数用户在使用这款程序的时候都有遇到这样的一种情况吧?
- Python连接MySQL,进行数据库表变更和查询:python mysql insert delete query:#!/usr/bin/
- 概述到2020年,Python2的官方维护期就要结束了,越来越多的Python项目从Python2切换到了Python3。其实在实际工作中,
- 在CSS样式中,dl部分只是简单的把内外边距设置为0,dd部分有一个clear属性需要特别注意。当某个元素的属性设置float浮动时,它所在
- 博主在这个问题上卡了挺久的,贴出来解决方法帮助需要的朋友,直接上代码(测试环境:win10+Python2.7):# coding=utf-
- 开篇继上次学习了信号量 semaphore 扩展库的设计思路和实现之后,今天我们继续来看 golang.org/x/sync 包下的另一个经
- 问题Go语言的输入Scan,无论是Scanf,还是Scanln还是其他,都是以空格结束输入的。但是我们输入可能是带空格的。比如 Fan On
- 一、事件(EVENT)是干什么的 自MySQL5.1.6起,增加了一个非常有特色的功能 - 事件调度器(Event Scheduler),
- update :单表的更新不用说了,两者一样,主要说说多表的更新 O