How to use CSS to achieve the circle effect (CSS Sprites)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to use CSS to achieve the circle effect (CSS Sprites)

jacklove

Jun 11, 2018 pm 02:01 PM

css

Encircling people effect (CSS Sprites)

<!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>

Example background image:

This article introduces how to use CSS to achieve the circle effect (CSS Sprites). For more related content, please pay attention to the php Chinese website.

Related recommendations:

How to perform AES256 encryption algorithm through PHP

How to send emails with attachments through PHP

Detailed explanation about php return data formatting class

The above is the detailed content of How to use CSS to achieve the circle effect (CSS Sprites). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn