javascript - 这个网站如何渲染图像？

Question

我正在为 youtube.com 编写用户脚本，并希望在 YouTube 页面上插入一个外观和风格与其他按钮相同的按钮。过去一切正常，但突然停止工作。在任何 youtube 视频顶部查看这张图片中的按钮:

所以我只注意到 Firebug 中的一件事，这些按钮包括文本和图像子节点，但渲染图像并不像给它们提供源图像 URL 那样简单。这些图像(“加号”图像或“向下箭头”图像)或所有其他此类图像的“src”属性具有完全相同的 URL(1 x 1 图像)://s。 ytimg.com/yt/img/pixel-vfl3z5WfW.gif。但最终它们被呈现为所有这些不同的图像。因此，当我在我的按钮中执行相同操作时，所有其他 CSS 属性都可以正常工作，但图像只是空白。

我只想从 html/javascript/css 专家那里知道 -

1. 他们是怎么做到的？
2. 如何通过CSS/javascript获取这些最终渲染好的图片？

谢谢!

附言:
- 如果版主想要关闭这个问题，说它不是编程问题，它是。要知道如何实现这种“无法检测”的 html 图像，或者用户脚本如何仍然通过 javascript/html/css 获取该图像。
- 如果主持人想关闭这个问题，说它太具体(关于 youtube.com)，它不是。这是一个关于 HTML 的一般问题，但到目前为止我只看到 YouTube 实现了。我是新手。

谢谢，
皮尤什

Answer 1

这种技术称为 CSS Sprite 。它用于减少 HTTP 请求量。

基本上，您只有一张包含所有图标的图片(因此您只需从服务器加载一张图片)。您可以将此图像用作元素上的背景图像，该元素的宽度/高度定义为要显示的图标大小，并使用 css 属性 background-position 将背景放置在顶部/图标左侧显示在背景图像中。

所以重要的部分是:

• 将图片设置为背景
• 为您的元素设置尺寸。由于图像用作背景，因此它不会隐式具有图像的大小!
• 设置背景位置规则

YouTube 使用以下图片:http://s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png

图像大小为 16px/16px，“加号”图标的顶部/左侧位置为 97px/66px，因此它们使用以下背景位置值:

background-image: url(//s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png);
background-position-x: -97px;
background-position-y: -66px;
width: 16px;
height: 16px;

进一步阅读:

• CSS Sprites: Image Slicing’s Kiss of Death
• The mystery of CSS sprites

生成器:

• Online CSS Sprites Generator