背景图片的精灵图的使用

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

背景图片的精灵图的使用相关推荐

CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...
html+css学习第六天（背景图片、精灵图片、元素内容溢出、长度单位）
一.背景图片背景图片默认显示的是图片的原始尺寸,如果背景图片大于元素尺寸,则只能显示图片的一部分(左上角). 1.background-image: 设置元素的背景图片. url("图片路 ...
android微信朋友圈背景图片渐变,【图】怎么生成朋友圈背景？微信朋友圈背景图生成器推荐...
当你打开任何一个朋友的微信朋友圈,首先映入眼帘的是什么呢?你可能会说是他的头像,但其实最吸睛的除了头像之外还有朋友圈的背景图.这块地方比头像的位置更为宽大,我们在这里可以充分发挥自己的想象力设计出适合 ...
threejs使用精灵图添加图片贴图
threejs添加精灵图片使用精灵图添加图片贴图使用精灵图添加图片贴图 const sprite = new THREE.Sprite(new THREE.SpriteMaterial({map: ...
CSS精灵图代码示例
什么是css Sprite 当用户访问一个网站时,浏览器会向服务器发送一系列请求,比如说网页上的每张图像都需要经过一次请求才能最终展示给用户.然而,一个网页中往往包含大量的图像资源(例如在页面中展示的 ...
css精灵图的使用步骤
精灵图的使用步骤 1.创建一个盒子,例如span.b.div 2.设置盒子的大小为小图片的大小 3.设置背景图片为精灵图 4.测量小图片距离精灵图左边和上边的距离(background-positio ...
coco2dx精灵和背景遮挡_Cocos2d-x精灵的性能优化——使用纹理图集和精灵帧缓存...
使用纹理图集纹理图集(Texture)也称为精灵表(Sprite Sheet) 使用纹理图集的优点: 1.减少文件读取次数,读取一张图片比读取一推小文件要快 2.减少OpenGL ES绘制调用并且加 ...
HTML网页精灵图的使用
精灵图的使用我们在制作网页的时候有些图片是在一起的,没有办法进行插入图片,这样精灵图的使用就帮助我们解决了这一问题.一下方式为例: 图片: 精灵图使用的代码图片: 具体为: .good{h ...
版心和精灵图的介绍与使用，以及做网页的注意事项
版心版心,顾名思义,就是居于板块的正中心. 版心的用法也非常简单, 具体的代码如下 div {width:800px;height:300px;background color:red;margin ...

背景图片的精灵图的使用

背景图片的精灵图的使用相关推荐

最新文章

热门文章