背景图片的精灵图的使用

背景图片的精灵图的使用<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>背景图片的精灵图的使用<

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

<!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
>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132972.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ajax跨域解除方案,关于Ajax跨域问题及解决方案详析「建议收藏」

    ajax跨域解除方案,关于Ajax跨域问题及解决方案详析「建议收藏」复现Ajax跨域问题做两个简单的小项目复现Ajax跨域问题.后端语言使用Java首先是一个简单的订单系统,通过访问/loadOrderList,最终以json串形式返回订单集合.该项目使用Tomcat发布在7070端口.@RequestMapping(“/loadOrderList”)@ResponseBodypublicListloadOrderList(Stringuid){//…

  • top命令 详解_top命令的用法

    top命令 详解_top命令的用法top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器。下面详细介绍它的使用方法。top是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中CPU最“敏感”的任务列表.该命令可以按CPU使用.内存使用和执行时间对任务进行排序;而且该命令的很多特性都可以通过交互式命令或者在个人定制文件中进行设定.1...

  • 清理谷歌浏览器注册表_将谷歌浏览器的注册表彻底删除的方法

    清理谷歌浏览器注册表_将谷歌浏览器的注册表彻底删除的方法解决谷歌浏览器无法重装问题。WindowsRegistryEditorVersion5.00;WARNING,thisfilewillremoveGoogleChromeregistryentries;fromyourWindowsRegistry.Considerbackingupyourregistrybefore;usingthisfile:…

    2022年10月31日
  • Jlink或者stlink用于SWD接口下载程序

    Jlink或者stlink用于SWD接口下载程序最近要使用stm32f103c8t6最小系统板,直接ISP串口下载程序太麻烦,就想着使用swd接口来调试。结果:通过SWD接口下载程序成功,但调试失败,还不知原因,会的的人麻烦交流一下。SWD接口:3.3VDIO(数据)CLK(时钟)GND1.首先声明jlink和stlink都有jtag和swd调试功能。jlink接口如下:如图,我使用的就是VCC…

  • 网络协议之LLDP

    网络协议之LLDP一、协议简介为什么会出现LLDP?随着网络技术的发展,接入网络的设备的种类越来越多,配置越来越复杂,来自不同设备厂商的设备也往往会增加自己特有的功能,这就导致在一个网络中往往会有很多具有不同特性的、来自不同厂商的设备,为了方便对这样的网络进行管理,就需要使得不同厂商的设备能够在网络中相互发现并交互各自的系统及配置信息。LLDP(LinkLayerDiscoveryProtocol,链路层发…

  • synchronized偏向锁和轻量级锁_java轻量级锁,偏向锁,重量级锁

    synchronized偏向锁和轻量级锁_java轻量级锁,偏向锁,重量级锁今天简单了解了一下java轻量级锁和重量级锁以及偏向锁。看了看这篇文章觉得写的不错原文链接java 偏向锁、轻量级锁及重量级锁synchronized原理Java对象头与Monitorjava对象头是实现synchronized的锁对象的基础,synchronized使用的锁对象是存储在Java对象头里的。对象头包含两部分:Mark Word 和 Class Metadata Address其中Mark Word在默认情况下存储着对象的HashCode、分代年龄、锁标记位等以下是32位JVM的

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号