大家好，又见面了，我是你们的朋友全栈君。
<!DOCTYPE html
>
>
<
html
>
html
>
<
head
>
head
>
<
meta
charset=
“utf-8”
/>
meta
charset=
“utf-8”
/>
<
meta
http-equiv=
“X-UA-Compatible”
content=
“IE=edge”
>
meta
http-equiv=
“X-UA-Compatible”
content=
“IE=edge”
>
<
title
>背景图片的精灵图的使用
</
title
>
title
>背景图片的精灵图的使用
</
title
>
<
meta
name=
“viewport”
content=
“width=device-width, initial-scale=1”
>
meta
name=
“viewport”
content=
“width=device-width, initial-scale=1”
>
<
link
rel=
“stylesheet”
type=
“text/css”
media=
“screen”
href=
“main.css”
/>
link
rel=
“stylesheet”
type=
“text/css”
media=
“screen”
href=
“main.css”
/>
<
script
src=
“main.js”
>
<
/
script
>
script
src=
“main.js”
>
<
/
script
>
<
style
type=
“text/css”
>
style
type=
“text/css”
>
.box{
width:
85px;
height:
32px;
background-image:
url(
“qq.png”);
background-position:
-601px
-160px;
margin:
400px
300px;
}
<
/
style
>
/
style
>
<!– 精灵图使用（重点）
☞浏览器中的坐标系
圆点以右为正方向，圆点以下为正。
☞CSS精灵是一种处理网页背景图像的方式。精灵图也是一种背景图片
☞精灵图的使用
◆使用fw一定要用打开的方式打开精灵图
◆使用精灵图作为背景图片的时候，常与background-position配合使用
◆测量精灵图中的元素的坐标使用矩形选择器 –>
</
head
>
head
>
<
body
>
body
>
<
div
class=
“box”
>
div
class=
“box”
>
</
div
>
div
>
</
body
>
body
>
</
html
>
html
>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/132972.html原文链接：https://javaforall.net
![vi/vim复制粘贴命令[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
