背景图片的精灵图的使用

全栈程序员站长

发布于 2022-06-28 14:06:20

3700

发布于 2022-06-28 14:06:20

大家好，又见面了，我是你们的朋友全栈君。

 <!DOCTYPE html
 > 
 <
 html
 > 
 <
 head
 > 
 <
 meta
 charset=
 “utf-8”
  /> 
 <
 meta
 http-equiv=
 “X-UA-Compatible”
 content=
 “IE=edge”
 > 
 <
 title
 >背景图片的精灵图的使用
 </
 title
 > 
 <
 meta
 name=
 “viewport”
 content=
 “width=device-width, initial-scale=1”
 > 
 <
 link
 rel=
 “stylesheet”
 type=
 “text/css”
 media=
 “screen”
 href=
 “main.css”
  /> 
 <
 script
 src=
 “main.js”
 >
 <
 /
 script
 > 
 <
 style
 type=
 “text/css”
 > 
 
 .box{  
 
 width:
 85px;  
 
 height:
 32px;  
 
 background-image:
 url(
 “qq.png”);  
 
 background-position:
 -601px
 -160px;  
 
 margin:
 400px
 300px;  
                 }  
 <
 /
 style
 > 
 <!– 精灵图使用（重点） 
  ☞浏览器中的坐标系 
  圆点以右为正方向，圆点以下为正。 
  ☞CSS精灵是一种处理网页背景图像的方式。精灵图也是一种背景图片 
  ☞精灵图的使用 
  ◆使用fw一定要用打开的方式打开精灵图 
  ◆使用精灵图作为背景图片的时候，常与background-position配合使用 
  ◆测量精灵图中的元素的坐标使用矩形选择器 –> 
 </
 head
 > 
 <
 body
 > 
 <
 div
 class=
 “box”
 > 
 </
 div
 > 
 </
 body
 > 
 </
 html
 >

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/132972.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年6月9，如有侵权请联系 cloudcommunity@tencent.com 删除

java