1 鼠标移入,背景图片改变显示,制造动态效果

最新推荐文章于 2022-03-27 21:31:22 发布

janckywong963

最新推荐文章于 2022-03-27 21:31:22 发布

阅读量301

点赞数

分类专栏： css案例文章标签：制造 XHTML HTML

css案例专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS实现动态效果的方法，通过同一背景图片在不同状态下的定位变化，结合特定的CSS属性设置如z-index和display，实现了独特的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出处: http://www.alistapart.com/
[img]/upload/attachment/115538/f5735d6b-4b3e-3124-8f2a-ec466bc9abea.jpg[/img]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>

* {margin: 0; padding: 0;}
body {font: 0.8125em Verdana, sans-serif; line-height: 1; color: #333; background: #FFF;}

a
{
text-align:center;
color:#FFFFFF;
text-decoration:none;
}
img
{
border:none;
}

#ish {position: relative; z-index: 10; border-top: 1px solid #666;
  font: bold 10px Arial, sans-serif; letter-spacing: 1px;}
#ish a:link, #ish a:visited {position: absolute; top: -33px; left: 150px;
  width: 65px; height: 52px; padding-top: 13px; text-align: center;
  background: url("ishbug.gif"/*tpa=http://www.alistapart.com/pix/ishbug.gif*/) top left no-repeat;
  color: #FFF;}
#ish a:hover {background-position: bottom right;}
#ish a em {display: block; margin-top: -0.2em;
  font: 2.33em Georgia, Times, serif; letter-spacing: 0;}

ul, ol {list-style: none;}
#navbar {height: 2.4em;
  padding: 0 0 0 215px;
  background: #FBFAF4;
  border-top: 5px solid #4997B5;
  font: 18px Georgia, Times, serif; overflow: hidden;
  min-width: 750px;}
#navbar li {float: left; padding: 0 23px 0 13px; margin-right: 5px;
  background: url("diamond-black.gif"/*tpa=http://www.alistapart.com/pix/diamond-black.gif*/) 100% 66% no-repeat;}
#navbar li a {display: block; padding: 0.75em 0 0.25em;
  text-transform: uppercase; color: #000;}
#navbar #feed {background: none;}
#navbar a:hover,
  .articles #navbar #articles a,
  .topics #navbar #topics a,
  .about #navbar #about a,
  .contact #navbar #contact a,
  .contribute #navbar #contribute a,
  .feed #navbar #feed a {
 background: url("navbarlinkbg.gif"/*tpa=http://www.alistapart.com/pix/navbarlinkbg.gif*/) top left repeat-x; color: #555;
}

#masthead {position: absolute; z-index: 5; top: 0; left: 22px;}
#masthead a {display: block; background: #81817C; width: 156px;}
#masthead a:hover {background: #000;}

</style>
</head>

<body>
<ul id="navbar">
  <li id="articles"><a href="index-1.htm" tppabs="http://www.alistapart.com/articles/" title="Articles">Articles</a></li>
  <li id="topics"><a href="index-2.htm" tppabs="http://www.alistapart.com/topics/" title="Topics">Topics</a></li>
  <li id="about"><a href="index-3.htm" tppabs="http://www.alistapart.com/about/" title="About">About</a></li>
  <li id="contact"><a href="index-4.htm" tppabs="http://www.alistapart.com/contact/" title="Contact">Contact</a></li>
  <li id="contribute"><a href="index-5.htm" tppabs="http://www.alistapart.com/contribute/" title="Contribute">Contribute</a></li>
  <li id="feed"><a href="index-6.htm" tppabs="http://www.alistapart.com/feed/" title="Feed">Feed</a></li>
</ul>

<h1 id="masthead"><a href="index.htm" tppabs="http://www.alistapart.com/"><img src="alalogo.gif" tppabs="http://www.alistapart.com/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" /></a></h1>

<div id="ish">
	<a title="Issue 285" tppabs="http://www.alistapart.com/issues/285" href="285.htm">No. <em>285</em></a>
</div>
</body>
</html>

用到的图片:
alalogo.gif

[img]/upload/attachment/115548/601c2a05-20f9-3261-8360-2978d12f3eef.gif[/img]

diamond-black.gif

[img]/upload/attachment/115550/c488e085-8a5d-3a7a-b861-5d04c26c1200.gif[/img]

ishbug.gif

[img]/upload/attachment/115551/56c2a4d5-65fa-312f-ac0f-fa6eb269ac04.gif[/img]

navbarlinkbg.gif

[img]/upload/attachment/115554/e689d939-10ed-326f-b21d-e8f670cf4ae4.gif[/img]

[img]/upload/attachment/115558/bae7051f-a41e-3722-b187-66067e0de363.jpg[/img]

看点1:
同一背景图片,#ish a:link, #ish a:visited 和#ish a:hover 中显示不同的部分,从而达到动态的效果,
background: url("ishbug.gif"/*tpa=http://www.alistapart.com/pix/ishbug.gif*/) top left no-repeat;
到
background-position: bottom right
top left ------> bottom right

看点2:
#ish 和 #masthead的 z-index属性

看点3:
#ish a em 和 #navbar li a 的 display: block;

看点4:
那条在标题栏下面,穿过no.285和a list apart 两张图片的水平黑线~~~
原来只是#ish 的 border-top: 1px solid #666;