在你的项目中,开始使用CSS子画面

分享于 

11分钟阅读

Web开发

  繁體

然后,我们将图像和另一个显示出来。 这不是文章的重点,但是看看看起来像两个图像只是一个。

介绍

本文将向你展示如何在你的网页项目中使用CSS精灵。 它很有用,因为它减少了页面的负载,因为加载了 LESS 图像,减少了服务器重载。

Background

人们一直认为使用CSS精灵是一件很难做的事情。 我从不理解 background-position 如何工作,我如何使用它。 但是,通过一些研究和优化Web项目的必要性,CSS,非常有用,不能丢弃这种可以能性。

不知道,CSS精灵只能使用一个或者更多图像,我们使用CSS属性对我们想显示给用户的图像进行定位。

它是一个小精灵图像精灵( 我不是一个小精灵的粉丝只是为了注意)。 如果我们把每个图像分开,你能想象客户端将打开多少个请求? 如果同时访问太多,服务器会非常快 ! 仅使用一个映像是打开的一个请求,并且只下载了一个文件。

这种技术在亚马逊。苹果。Twitter。Facebook和开发人员中都知道它的重要性。

使用代码

我们需要理解数学中的图形,才能理解CSS的。 不是很长的解释,只是如何工作。

笛卡尔平面是由法国数学家 René。哲学家和物理学家创建的。 他认为我们可以用坐标X 和Y 来定位一个确定区域中的任何东西。

你在上学的时候,记住了? ( 复制/SparkNotes )

X 坐标表示水平水平位。 Y 坐标Y 坐标表示垂直垂直方向的位置。

我如何在现实生活中应用它?

你想帮助你的朋友在你的浴室( 你的牙刷,可能是) 上找到一个东西。 你可以告诉他"它靠近吉他和牙膏,inside的衣衣"。

但他是葡萄牙语他不理解任何你说的。 如果你理解葡萄牙语,你可以说" Escova",但可能你不。 所以,如果你已经把浴室的( 今天如果不是的话) 地图,你可以给牙刷位置一个笛卡尔平面。

给他打电话说"它处于启用状态( 2,3 ) 他会找到的。 但如何?

你,而不是说( Gillette和牙膏)的附近,说出它的坐标。 他只是跟着它找到你要找的东西。

是 relative 到你浴室的 ! 但我们可以做一个笛卡尔平面,如果我们想要,编目所有星星,然后访问它。 所有的东西都是物理或者可以测量的,好的? 没有什么可以试图把你的感情映射到笛卡尔平面。

对他说,"它在 2,3上"的位置为,垂直( Y ) 位置为。"

所以,笛卡尔平面的一般形式是: 牙刷( ,Y ),在那里,我们给你的牙刷是 NAME。 一般来说,我们只使用一个字母( A,B,C,D。),但它可以是任何你想要的。 请注意,它不需要是整数。 可以是十进制( 0.5 ),分数( 1/2 ) 等。

好的,我怎样才能把它用于 CSS Sprite?

用同样的方法 ! 我们只需要把图像看作一个笛卡尔平面,用像素表示X 和Y 位置。

我们将使用这个 post ( 你可以下载并使用如果你想要) 上的图像 below:

注意它有一个透明的background,在一般的CSS精灵中你会看到使用一个透明的background (。只有GIF和PNG支持透明)。 但是为什么"?

我们可以使用一个空白 background 或者任何它的他颜色( 在油漆上做,例如)的CSS图像,但如果我们试图在暗 background 上应用它:

如果不假设使用不同背景色的图像,则只使用非透明 background,如果JPEG大小低于PNG和GIF大小( 只支持透明)。

如果你还没有照片编辑器,我建议你下载的Fireworks ( 现在我写这个,它在CS6版本上)。 它是付费产品,但对于Web开发( 是图像编辑器) 非常有用。 它是由Adobe开发的,它是 Photoshop。

如果你不能为( 如果你每天都开网站,那价格是值得的) 付费,你可以使用GIMP创建透明PNG图像,但是你需要在Google中搜索它。 如果已经安装 Photoshop,可以自由使用它,但是请注意,这个过程与Fireworks相关,我无法帮助你完成它。

如果你选择 Fireworks,请打开它。 点击 > 新。 使用宽度: 500和高度: 500,并选择一个收费的透明的背景。

这将会成为一个大图像 ! 别担心,我们会把它的宽度和高度降低。 在它上面,拖放要添加到CSS子画面中的所有图像。 在我们的示例中,我们将使用 2个图像。

如果添加的图像没有透明背景,可以使用 Magic工具来删除背景。 如果需要更精确的方法,你可以使用多边形套索工具手动删除 background。 他们被标记为 图像 below 上的红色。

在添加图像( 如果需要,编辑它) 之后,选择它们并按 Ctrl + G,它们将只在一个图像中统一,如下面的图。

请确保他们在它的他(。占用 LESS 空间,使图像更慢) 附近,但不是那么近 ! 让空间分开( 如。 可以是 LESS 或者更多,具体取决于你应用 CSS Sprite的图像)。

如果你收费不让一些空间,我们的CSS Sprite会得到类似这样的结果:

注意,第二个图像的部分出现在 1st 个图像。

点击 Ctrl + X 按钮,点击文件> new新的和Fireworks将创建一个图像,我们在剪贴板区域的图像中有宽度和高度。

你可以在保存(。在Fireworks上使用优化,在右侧栏) 之前优化它,但这不是本文的重点。

编码部分

我们现在有图像了。 让我们用它来制作第一个 CSS Sprite ! 记住这就是这个:

从第一个带有CSS的图像( black 放大) 开始:

CSS
.searchBtn {
 background: url('search.png') no-repeat 0px 0px;width: 12px;height: 13px;}

它将返回 1st 映像:

现在我们需要理解它是如何工作的,通过 background-position语法初始化:

background-position:x-pos y-pos; 

因为我们先开始学习笛卡尔平面然后再继续 ! 它是精确的。1st 值( 0 ) 是的X ( 水平) 位置,2nd 值是Y ( 竖直) 位。

但这还不够清楚我知道 ! 我们需要在像素视图中对它的进行可视化:

首先,我们需要想象笛卡尔平面( 总是在 [ 0, 0 ]的中心) 中的图像。

请注意,在CSS中我们使用 background-position: 0px 0px;

使用它,我们说在水平位置( X ) = 0读取图像。 之后,我们使用了宽度属性,表示我们选择的水平点( 0 ) 后面的12像素是显示出来的。

background-position 值是垂直位置( Y ) = 0,我们使用高度读取它之后的13像素。

现在,让我们尝试读 2nd 个 !

.searchBtn:hover {
 background: url('search.png') no-repeat -20px 0px;width: 12px;height: 13px;}

使用它,我们将拥有( 当悬停按钮时):

这太令人惊讶了它现在必须更清楚,但是让用另一个图像更好地理解它的工作原理。

请注意,我们使用了 background-position: -20px 0px;

这意味着 X ( 水平 )的位置将为,而Y ( 竖直) 位置的收费将为。 注意到,在图像波纹管中很容易看到。

这意味着我们将在 ( 拉 black 放大,因为它现在不重要) 之后开始读取图像。 在这个位置之后,它会在( 水平 direction ) 后读取,以为单位指定。

在Y position后,将读取 13px bellow,以高度为单位指定如何指定。

注意,因为你不认为这篇文章有其他价值,并不意味着 !

所以我需要在每次使用CSS精灵时手工做?

不有 2个备选方案。

如果你用烟花, 是一个内置的add-on。 使用选取工具 红色 ),并选择需要坐标的图像部分。 它将显示在宽度和高度( 蓝色)。

另一个选择是 Sprite ( http://www.spritecow.com/ )。 你只需要上传图像并选择你想要坐标的部分。 它会给你完整的CSS,我用它来写文章。

Points of Interest

开始时理解它真的很令人失望,我避免了自开始编程以来使用CSS子画面。 但是当你开始理解它是如何工作的时候,它是。

在开发网站后只制作你的CSS Sprite。 这是因为在分离的文件中改变图像有点困难。

Fireworks有一个内置功能,我们不在这篇文章中使用,称为优化。 请使用它,而不是的文件> 另存为。 ,因为它将保存在没有质量损失和编辑以后,使它大。 保存原始文件,但为你的服务器上传优化的图像 !

尽量使用 LESS 空间 ! 如果没有,空间将增加,没有什么有用的。

我建议仅对图标使用 CSS sprite,而不是对具有高宽和高的图像。

你可以在文章中使用非透明 background,但是只有当你确定不在它的他颜色的background 中使用这里CSS图像时。 如果JPEG图像大小大于GIF或者 PNG,我建议你进行这里操作。

历史记录

  • 16 2012年月: 文章发布。
  • 18 2012年月: 更新

相关文章