首页 > 开发 > CSS > 正文

CSS布局中常用的CSS图像置换、图片替代的方法举例

2024-07-11 08:40:26

字体：大中小

来源：转载

供稿：网友

　　在xhtml CSS网页布局中，我们很多结构与表现的图片，都用背景来进行操作的。例如栏目的标题，我们可以制作一幅图片，由于是图片，所以加上装饰性的图案纹理，文字字体也可以更加的多样化。我们常用的方法是background-image: url(http://www.CuoXIn.com/skins/CuoXIn_logo4.png) 但我们需要考虑到两种情况的发生：

　　1、假如访客在浏览网页时，丢失了css文件，直接显示了页面的xhtml标签。我们的页面就变的难以读懂了，因为背景图片是在css文件中定义了，而此时根本显示不出来，我们无法阅读页面内容。

　　2、搜索引擎蜘蛛程序对图片中的文字根本无法辩认。它根本不清楚这里描述与表现的是什么。

　　我们就可以通过CSS图像置换、图片替代的方法来解决上面的两个问题。相当于说，栏目的标题我们用背景图片来表现，当css文件丢失时，可以显示出文字。当搜索引擎蜘蛛读取网页时，也能知道此标签的内容。也就是让图像替换掉文字，美化页面，更具有兼容性与搜索引擎优化。我们进入主题，下面例举了一些常用的CSS图像置换、图片替代的方法，希望对你有参考意义。本文章由CuoXIn.com原创！

　　小提示：你可以用Web Developer插件去掉CSS效果来查看丢失css文件时的情况。

一、直接隐藏文字法 display: none

示例代码 [www.CuoXIn.com]

上一篇：DOV CSS表单：超炫的单选框与复选框效果！-Adam

下一篇：用CSS打造评分星级效果的一个实例

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注