时间:2021-05-25
今天有个朋友做网页的时候遇到个问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇到过这个问题,这里我把常用的几个方法写出来,把思路也讲一下,希望能帮助刚开始学习的朋友。
“以图换字”就是用图片替换文字表现。我们都知道,文字在浏览器里的表现形式是很差的,会有锯齿,没办法圆润还有没办法做很多效果。一般情况下网页的内容部分是不需要做效果的,但是在WEB标准中对于LOGO、标题,常常需要用到这些。用表格来做的话我们只是在某个地方帖上一张图,这样的方式比较简单,但是不利于搜索。所以我们需要采用标准方式来做,保证网页处于一种良好的状态而有利于搜索。通常以图
显示消失:(display:none;)这不只是让容器内的内容消失而是包括容器本身都消失。所以我们必需在容器内再做一个容器来保证内消失部分之后,容器内的背景可以正常显示。例:
复制代码 代码如下:<divid="logo">标题内容</div>#logo{display:none;background:URL;width:300px;height:100px;}
如果是这样写那么你根本什么也看不到。那正确的方式是什么写呢?看示例:
复制代码 代码如下:<divid="logo"><span>标题内容</span></div>#logo{background:URL;width:300px;height:100px;}#logospan{display:none;}大家注意上面的代码,背景是在#logo下定义,而#logospan下除了display:none;没有任何样式。因为被定义了display:none;属性的容器会一无所见,如果定义其它样式也是浪费。光是这样还是有问题,这是个没有链接的例子,那有链接的时候怎么办呢?我们再来看个例子:
复制代码 代码如下:<divid="logo"><ahref="URL"title="标题">标题内容</a></div>#logo{background:URL;width:300px;height:100px;}#logoa{display:none;}
大家猜一下这个代码能显示出东西吗?事实是背景显示了,可是链接没了。我们上面说过:被赋于了display:none;属性的容器自身也会消失。那我们就清楚了,必需要在这个A标签里加个容器。我们再看示例:
复制代码 代码如下:<divid="logo"><ahref="URL"title="标题"><span>标题内容</span></a></div>#logo{background:URL;width:300px;height:100px;}#logoaspan{display:none;}这样的是不是就正确了呢?还是不行,为什么呢,我们都知道A不是块级标签,也就是说A的高宽都是内容来决定的,现在内容消失了,也就没有了这个高宽的属性了,那么这个链接也就成了一个没有热区的链接了。可能是点不着的。我们必需要把上面的代码再做修改。
复制代码 代码如下:<divid="logo"><ahref="URL"title="标题"><span>标题内容</span></a></div>#logoa{background:URL;width:300px;height:100px;display:block;}#logoaspan{display:none;}
注意这里的A标签的属性一定要加上display:block;把他强制为块级元素。这样A标签就成了一个宽为300高为100,有一个背景没有文字内容的链接形式。大家看到了上面在A标签里还加了一个span标签,好像有点多余。能不能不用span也可以实现效果呢。可以,不过思路就不一样了,而是下面的这种位置移动法。
位置移动:也就是让内容啊分进行位置移动,移出显示区之外。我们还是看代码来了解这个方法。
复制代码 代码如下:<divid="logo"><ahref="URL"title="标题">标题内容</a></div>#logo,#logoa{width:300px;height:100px;overflow:hidden;}#logoa{background:URL;padding:100px00;display:block;}在CSS中设置了#logo与A有一个溢出隐藏(overflow:hidden;)也就是说有超出300*100大小的就会被隐藏。我们看A被定义了一个padding:100px00;这个顶部的内距正好把内容压到了显示区以外。那为什么#logo也要用overflow:hidden;呢?因为在IE下会出现一个小BUG,A的内容没办法溢出隐藏所以必需要在父级标签上还要加一个overflow:hidden;
以上内容只是我比较常用的两种方法,当然还会有一些别的方式方法,这些方法都有各自的有缺点,不过各种方法之间也都有互补的。在应用时可以依据情况选择使用即可。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前面的话CSS以图换字的技术,很久都没人提起了。它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换
iPhone7P手机内存扩容升级及换后壳全过程(图1) iPhone7P手机内存扩容升级及换后壳全过程(图2) iPhone7P手机内存扩容升级及换后壳
手机美图秀秀换照片底色的方法: 1、用美图秀秀打开要换底的照片。 2、单击“场景”,抠图换背景,开始抠图。 3、在弹出的抠图方式选择对话框中选择“自动扣图
全文主题风格:淘宝网换淘宝主图怎么操作不减权?有什么方法有关谈起主图针对检索和权重值的危害也很大,因此,许多商家针对换淘宝主图也是很慎重的,那麼淘宝网换淘宝主图
以图虫为例,抖音卡着点换照片的方法如下: 1、首先需要在手机应用市场下载图虫APP; 2、登录完成后进入首页,点击红色的加号; 3、选择要用的78张照片,