CSS - 精灵Sprite

一张大图中包含很多小图,结合css的

"height", "width", "background-image","background-repeat","background-position"的组合进行背景定位。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a {
        width: 67px;
        height: 32px;
        background: url(110.png) no-repeat left top;
        display: block;  /*转换*/
    }
    a:hover {
        background-position: left bottom;
    }
    </style>
</head>
<body>
    <a href="#"></a>
</body>

原文地址:https://www.cnblogs.com/allen2333/p/9004527.html

时间: 2024-10-09 05:49:24

CSS - 精灵Sprite的相关文章

CSS精灵

方法一: 方法二: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 方法二能够降低http请求.! ! css精灵的核心思想是将多张图片合成为一张图片,然后通过背景属性中的定位position来控制究竟显示图片中的哪些部分.假设网页中能选择中的图片.肯定是插入的图片,选不中就是背景图片.

【CSS】CSS Sprites (CSS 精灵) 技术

CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- re

UGUI中将图片转换成精灵Sprite

上一篇中讲述了NGUI动态打图集的功能,提到UGUI将图片转换长Sprite格式,其实网上也有好多,那我在这简单的说一下, using UnityEngine; using System.Collections; using UnityEngine.UI; public class CreateTexture : MonoBehaviour {     private Image image;     void Awake()     {         image = GameObject.F

OGEngine游戏开发之精灵(sprite)

Spirte简介 sprite可以说是游戏中的主角,我们建立各种图片,人物的显示都离不开它.sprite类很丰富,如果看过源代码的不难发现,可用的类型很多:基础精灵Spirte.动画精灵AnimatedSpirte.按键精灵ButtonSprite. 你可以有多种选择,可以直接使用AnimatedSprite来绘制人物动画,可以使用ButtonSprite来绘制按钮,也可以继承Sprite类实现自己的精灵.因此,我们在此介绍Sprite的使用,首先让我们了解下精灵的相关知识: 纹理Texture

CSS Sprites(CSS 精灵)

一.什么是CSS Sprites? 一般css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位. 二.使用CSS Sprites的优缺点 优点: 1.很好地减少网页的http请求,从而大大的提高页面的性能. 2.减少图片的

精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术

精灵图 精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术 原理:将多张单一的图片整合到一张图上,以背景引入,并使用background-position调整背景位置,使之显示不同图片 目的:降低浏览器向服务器的请求次数,提高网页加载速度 优点:降低请求次数,多张图整合成一张降低整体大小,整改一张图使得整体风格主题改变,提高维护性 缺点:自适应布局难控制,制作繁琐,不合理的整合图片会导致调用混乱,一张图更改导致整体变化(牵一发动全身) <div class="s

CSS——精灵技术

精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites.CSS雪碧). 精灵技术本质 简单地说,CSS精灵是一种处理网页背景图像的方式.它将一个页面涉及到的所有零星背景图

20-css控制背景与css精灵

CSS控制背景 背景 background:颜色 图片 平铺方式 固定方式 位置 背景颜色 background-color:red: 背景图像 background-image:url(背景图像的位置及全称) 背景图片的重复方式 background-repeat:[repeat.no-repeat.repeat-x.repeat-y] x坐标y坐标[第一个值是水平位置,第二个是垂直位置]左上角0 0.单位是像素(0px 0px) 背景图像的位置 background-position:top

CSS sprites(css精灵)

关于雪碧图(css sprites)网上已经有非常详细的介绍,比如百度百科,最简单的来说,CSS sprite即把网页中比较小的一些小图片整合到一张图片文件中,再利用CSS的background-image属性插入图片,然后利用background-position属性对图片所需要的部分进行精确定位,从而达到减少服务器请求次数的目的. 这里主要使用雪碧图实现一个最简单的小图标导航展示.具体代码可以见附件1,素材详见附件2,效果图详见附件3. 本例使用内部样式的方式对整个文档格式化处理,最核心的部