Maison > Article > interface Web > Comment utiliser CSS pour obtenir l'effet de cercle (CSS Sprites)

Comment utiliser CSS pour obtenir l'effet de cercle (CSS Sprites)

jackloveoriginal: 2018-06-11 14:01:271930parcourir

Effet d'encerclement de personnes (Sprites CSS)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> css sprites </title>
  <style type="text/css">
	body{font-size:14px;}
	#imgmap{position:relative; width:350px; height:263px; background:url(&#39;office.jpg&#39;) no-repeat;}
	#imgmap .map{position:absolute;}
	#imgmap .map span{font-weight:bold; color:#000000; padding:3px; background:#FFFFFF; border:1px solid #CCCCCC;}
	#imgmap #d1{top:55px; left:109px;}
	#imgmap #d1 a{display:block; width:73px; height:69px; text-decoration:none;}
	#imgmap #d1 a:hover{background:url(&#39;office.jpg&#39;) -109px -317px no-repeat;}
	#imgmap #d1 a span{display:none;}
	#imgmap #d1 a:hover span{position:absolute; top:-25px; width:95px; display:block;}

  	#imgmap #d2{top:111px; left:211px;}
	#imgmap #d2 a{display:block; width:47px; height:34px; text-decoration:none;}
	#imgmap #d2 a:hover{background:url(&#39;office.jpg&#39;) -211px -373px no-repeat;}
	#imgmap #d2 a span{display:none;}
	#imgmap #d2 a:hover span{position:absolute; top:-25px; width:60px; display:block;}

   	#imgmap #d3{top:165px; left:168px;}
	#imgmap #d3 a{display:block; width:81px; height:87px; text-decoration:none;}
	#imgmap #d3 a:hover{background:url(&#39;office.jpg&#39;) -168px -427px no-repeat;}
	#imgmap #d3 a span{display:none;}
	#imgmap #d3 a:hover span{position:absolute; top:-25px; width:80px; display:block;} 

   	#imgmap #d4{top:101px; left:72px; z-index:100;}
	#imgmap #d4 a{display:block; width:96px; height:54px; text-decoration:none;}
	#imgmap #d4 a:hover{background:url(&#39;office.jpg&#39;) -72px -625px no-repeat;}
	#imgmap #d4 a span{display:none;}
	#imgmap #d4 a:hover span{position:absolute; top:-25px; width:70px; display:block;}    

   	#imgmap #d5{top:124px; left:45px;}
	#imgmap #d5 a{display:block; width:64px; height:39px; text-decoration:none;}
	#imgmap #d5 a:hover{background:url(&#39;office.jpg&#39;) -45px -386px no-repeat;}
	#imgmap #d5 a span{display:none;}
	#imgmap #d5 a:hover span{position:absolute; top:-38px; width:107px; display:block;}    

  </style>
 </head>

 <body>
 
  <p id="imgmap">
	<p class="map" id="d1"><a href="javascript:void(0)"><span>17寸的显示器</span></a></p>
	<p class="map" id="d2"><a href="javascript:void(0)"><span>听筒坏了</span></a></p>
	<p class="map" id="d3"><a href="javascript:void(0)"><span>白色的机箱</span></a></p>
	<p class="map" id="d4"><a href="javascript:void(0)"><span>ThinkPad</span></a></p>
	<p class="map" id="d5"><a href="javascript:void(0)"><span>我不知道这玩意是哪里买的</span></a></p>
  </p>
 
 </body>
</html>

Exemple d'image d'arrière-plan :

Cet article explique comment utiliser CSS pour obtenir l'effet de cercle (CSS Sprites). Pour plus de contenu connexe, veuillez faire attention au site Web php chinois.

Recommandations associées :

Comment exécuter l'algorithme de cryptage AES256 via PHP

Comment envoyer des e-mails avec pièces jointes via PHP

Explication détaillée de la classe de formatage des données de retour PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：HTML et CSS pour implémenter une page de connexion en arrière-plan dynamiqueArticle suivant：HTML et CSS pour implémenter une page de connexion en arrière-plan dynamique

Articles Liés

Voir plus