精通CSS（parallax&Image replacement）

最新推荐文章于 2021-12-16 12:48:17 发布

孤岛浅滩

最新推荐文章于 2021-12-16 12:48:17 发布

阅读量443

点赞数

分类专栏： notes 文章标签：图像替换 CSS 基础笔记 parallax

本文链接：https://blog.csdn.net/m0_37851778/article/details/73409829

版权

notes 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

一.parallax

<!doctype html>
<html>
<head>
	<title></title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="">
	<style type="text/css">
	/*How to do?
	①创建几个不同层次的背景图像。
	②将主背景应用于Body元素中。
	③将中、前两层分别应用不同的背景图像，起到相互覆盖并盖在body层上的效果。
	同时，调整background-position元素，控制其平移速度。
	*/
	body{
		background-image: url(images/bg-rear.gif);
		background-repeat: repeat-x;
		background-color: #d3ff99;
		background-position: 20% 0;
	}
	.midground{
		background-image: url(images/bg-mid.png);
		background-repeat: repeat-x;
		background-color: transparent;
		background-position: 30% 0;
	}
	.foreground{
		background-image: url(images/bg-front.png);
		background-repeat: repeat-x;
		background-color: transparent;
		background-position: 400% 0;
	}
	p{
		max-width: 61em;
		margin:0 auto;
		padding: 100px 20px 0 20px;
		margin-top: -0.5em;
		font-size: 4em;
		text-align: center;
		color: teal;
	}
	</style>
</head>
<body>
	<div class="midground">
		<div class="foreground">
			<p>Parallax</p>
		</div>
	</div>
</body>
</html>

二.FIR（Fahrner Image Replacement）

<!doctype html>
<html>
<head>
	<title></title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="">
	<style type="text/css">
	/*许多流行的屏幕阅读器会忽略那些display属性值none/visibility/hidden。
	因此会完全忽略这个文本，从而造成严重的可访问性问题。*/
	h2{
		background: url(images/placeholder.gif) no-repeat;
		width: 400px;
		height: 300px;
	}
	span{
		display: none;
	}
	h1{
		color:teal;
		font-family: helvetica;
	}
	</style>
</head>
<body>
	<h1>FIR(Fahrner Image Replacement)</h1>
	<h2>
		<span>Hello Fahrner Image Replacement</span>
	</h2>
</body>
</html>

Result：

三.Phark

<!doctype html>
<html>
<head>
	<title></title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="">
	<style type="text/css">
	/*
		①对标题进行非常大的负值文本缩进
		②解决了Fahrner屏幕阅读器缺失文本问题。
		③但是在关闭图像打开CSS情况下是无效的。
	*/
	h2{
		text-indent: -999px;
		background: url(images/placeholder.gif) no-repeat;
		width: 400px;
		height:300px;
	}
	h1{
		color:teal;
		font-family: helvetica;
	}
	</style>
</head>
<body>
	<h1>Phark</h1>
	<h2>
		Hello Phark.
	</h2>
</body>
</html>

Result:

四.(s)IFR

1.为什么进行图像替换：计算机缺少可用的字体。
2.为什么可以用Flash文件替换文本（IFR）：Flash允许使用SWF文件（Shock Wave Flash)。
3.如何替换（IFR）？
①使用JS搜索文档，找到特定元素或具有特定类名的元素中所有文本。
②使用JS将文本替换为一个小的Flash文件。
③不为每段文本创建单独的Flash文件，而是将被替换的文本放在一个重复的Flash文件中。因此，进行图像替换所要做的就是添加一个类，Flash和JS会完成剩下的工作。
4.另一个好处（IFR）：Flash文件中的文本是可选择的，因此可以轻松复制和粘贴它。
5.IFR：Inman Flash Replacement.(Shaun Inman)
6.sIFR：Stretch Inman Flash Replacement(多行文本替换和改变文本字号)