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

最新推荐文章于 2022-06-16 22:38:23 发布

Serein

最新推荐文章于 2022-06-16 22:38:23 发布

阅读量2k

点赞数

分类专栏： Web前端页面设计与开发文章标签： css 浏览器 html firefox border object

本文链接：https://blog.csdn.net/cxwen78/article/details/6567704

版权

Web前端页面设计与开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果与目的：

利用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>
		<!-- 
		** 在h1内部添加span元素，并通过CSS应用背景图片来覆盖HTML文本
		**span元素的CSS设置见css代码
		-->
		<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 属性设置元素的上外边距 */
}

浏览效果图：

1、使用Firefox浏览器并且支持图片显示功能时的浏览图

使用Firefox浏览器并且支持图片显示功能时的浏览图

2、使用Firefox浏览器但关闭图片显示功能时的浏览图

使用Firefox浏览器但关闭图片显示功能时的浏览图

附件：页面中的两张背景图片

span元素背景图片：

h1元素背景图片：

参考：《The Art & Science of CSS》

Serein

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现隐藏正常显示的文本，并用图片替换

效果与目的：利用CSS，将HTML正常显示的文本隐藏起来，并用一个图片代替。使得任何用户浏览器只要支持CSS，就会看到替换后的图片，而不支持CSS的用户浏览器只会看到普通文本。 HTML代码：CSS实现隐藏正常显示的文本，用图片代替 <!-- ** 在h1内部添加span元素，并通过CSS应用背景图片来覆盖HTML文本 **span元素的CSS设置见css代码
复制链接

扫一扫

专栏目录