CSS实现隐藏正常显示的文本，并用图片替换

最新推荐文章于 2024-01-16 17:44:28 发布

iteye_4537

最新推荐文章于 2024-01-16 17:44:28 发布

阅读量325

点赞数

文章标签： xhtml

效果与目的：

利用CSS，将HTML正常显示的文本隐藏起来，并用一个图片代替。使得任何用户浏览器只要支持CSS，就会看到替换后的图片，而不支持CSS的用户浏览器只会看到普通文本。

HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <LINK href="css.css" type=text/css rel=stylesheet> <TITLE>CSS实现隐藏正常显示的文本，用图片代替</TITLE> </HEAD> <BODY> <h1>  <span></span>Going to the snow! </h1> <p>Going to the snow主题相关文本段落01</p> <p>Going to the snow主题相关文本段落02</p> <p>Going to the snow主题相关文本段落03</p> </BODY> </HTML>

CSS代码：

/* 常见元素的周边属性margin和padding省缺时，默认设为0 */ body, dd, dl, dt, embed, fieldset, form, h1, h2, h3, h4, h5, h6, img, li, object, ol, p, ul { margin: 0; border: 0 none #FFF; padding: 0; } body { padding: 20px; /* 内边距属性设置 */ background-color: #DDEEFF; /* BODY的背景颜色 */ background-image: url(images/body_bg.jpg); /* BODY的背景图片 */ background-repeat: repeat-x; /* 背景图片图片的平铺模式：水平方向重复 */ color: #000; /* 规定文本的颜色。 */ font-size: 75%; /* 字体大小设置为基于父元素的一个百分比值。 */ line-height: 1.4em; /* 设置行间距离（行高） */ font-family: Arial, Helvetica, sans-serif; /* 规定元素的字体系列，字体选择优先级别从左往右 */ } h1 { /*h1的位置是相对位置。如果父元素具有相对位子， /*那么，对于它内部的任何具有据对位置的元素，它们的原点坐标都是基于具有相对位置的父元素 /*所以接下来设置h1内的span的left坐标和top坐标为0，意味着就在h1内部的左上角*/ position: relative; width: 389px; height: 43px; overflow: hidden; /*overflow 属性规定当内容溢出元素框时发生的事情，属性值为hidden表示溢出内容会被修剪，并且不可见 */ font-size: 175%; line-height: 43px; text-transform: uppercase; /* text-transform 属性控制文本的大小写，属性值为uppercase表示仅有大写字母。 */ } h1 span { position: absolute; left: 0; top: 0; z-index: 10; /*z-index 属性设置元素的堆叠顺序，其值可正可负正数，为正数则离用户更近，为负数则表示离用户更远*/ width: 100%; /*width和height属性设置为100%可自动扩展到与父元素h1同样的大小*/ height: 100%; background-image: url(images/title_snow.gif); /* span元素的背景图片 */ background-repeat: no-repeat; /* 背景图片图片的平铺模式：仅显示一次 */ } p { width: 40em; margin-top: 1.5em; /* margin-top 属性设置元素的上外边距 */ }