CSS精灵

马黑黑

千羽 发表于 2022-7-1 21:11
黑黑老师又出新产品了，看着技术含量就很高

一般般

马黑黑

红影 发表于 2022-7-1 21:16
“-100px 0px 表示：大图的定位，水平方向左移100个像素”

这个不懂，包括垂直方向的上移。是从哪开始移 ...

再举例说一下：

图 200 * 100
元素：100 * 50

现在在元素上使用图片：

background: url('pic.jpg') no-repeat -100px - 50px;

这是用了图片的右下的那一四分之一格。第一个参数 -100px，指明图片往左边移动 100 像素，就是水平方向移了一半，-50px 指明往上移了一半，垂直方向，留在元素上的背景，就是右下的四分一。

这个要比划一下，就能理解的。

马黑黑

红影 发表于 2022-7-1 21:17
黑黑又带来新知识，辛苦了

这个有用的，我最近的几个帖子都会用到这个

红影

马黑黑 发表于 2022-7-1 21:43
实际上也不是切割，对原图没有任何伤害。但达到切割的目的。

原理应该能看得出来：取图片指定位置、尺 ...

代码整整齐齐就给取出来了，也算是切割吧

马黑黑

红影 发表于 2022-7-2 21:21
代码整整齐齐就给取出来了，也算是切割吧

本质上是取，不切

红影

马黑黑 发表于 2022-7-1 22:45
但拼凑后整体感并没有破坏吧

严丝合缝，一定没破坏。

马黑黑

红影 发表于 2022-7-2 21:38
严丝合缝，一定没破坏。

是的。这是弱水三千我只取一瓢饮的经典案例。

千羽

马黑黑 发表于 2022-7-2 18:08
一般般

高端技术，不是一般般

红影

马黑黑 发表于 2022-7-2 21:30
本质上是取，不切

好吧，但效果是一样的啊。

红影

马黑黑 发表于 2022-7-2 21:40
是的。这是弱水三千我只取一瓢饮的经典案例。

只取四瓢饮

马黑黑

红影 发表于 2022-7-2 22:21
只取四瓢饮

额，还要细化

马黑黑

红影 发表于 2022-7-2 22:20
好吧，但效果是一样的啊。

不一样，切是要动刀的

马黑黑

千羽 发表于 2022-7-2 22:05
高端技术，不是一般般

那就是二班

千羽

马黑黑 发表于 2022-7-2 23:18
那就是二班

纠正下：是超班

马黑黑

千羽 发表于 2022-7-2 23:19
纠正下：是超班

对，超过了二班，那就是三班了

千羽

马黑黑 发表于 2022-7-2 23:20
对，超过了二班，那就是三班了

哈哈，说不过你，东篱老师说喝水喝水

马黑黑

千羽 发表于 2022-7-2 23:21
哈哈，说不过你，东篱老师说喝水喝水

O(∩_∩)O谢谢

红影

马黑黑 发表于 2022-7-2 23:16
额，还要细化

取那么多饮，不怕撑啊

红影

马黑黑 发表于 2022-7-2 23:17
不一样，切是要动刀的

不用切这个字眼，用“隐”总可以吧，这个命令把不需要被看到的隐了。

马黑黑

红影 发表于 2022-7-3 10:55
不用切这个字眼，用“隐”总可以吧，这个命令把不需要被看到的隐了。

实际上也没有隐藏，只是小块没那么宽，显示不出来