这个网站如何渲染图像？

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 sprites。它用于减少 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

Answer 2

这种技术被称为“CSS sprites”：

• http://css-tricks.com/css-sprites/
• http://www.alistapart.com/articles/sprites
• http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
• https://stackoverflow.com/search?q=css+sprites

他们使用one image with all the backgrounds，并使用 CSS 来设置元素的高度和宽度，并以只显示一部分的方式定位背景。

在 YouTube 的案例中，他们似乎使用 1x1 空白 <img> 并在 img 标记本身上设置背景图像。

Answer 3

我为 youtube.com 编写了一个用户脚本，并希望插入一个与 YouTube 页面上的其他按钮具有相同外观和感觉的按钮。

只要给你的按钮一个yt-uix-button yt-uix-button-default 类，它就会和其他按钮有相同的外观和感觉。我在自己的 YouTube 用户脚本中做同样的事情。

过去工作正常，但突然停止工作。

是的，他们在上次大更新期间更改了一些类名。

正如您在评论中指出的那样，以前该课程只是yt-uix-button，现在您还必须添加yt-uix-button-default。

---

这是我的自定义按钮，只是为了显示它有效；）

Answer 4

查看该标签的 CSS 声明。例如，like 按钮有这个 html：

<button onclick=";return false;" title="I like this" type="button" class="start yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip" id="watch-like" data-button-toggle="true" data-button-action="yt.www.watch.actions.like" role="button" data-tooltip-text="I like this">
    <img class="yt-uix-button-icon yt-uix-button-icon-watch-like" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="I like this"><span class="yt-uix-button-content">Like </span>
</button>

并且在 CSS 中有一个声明：

#watch-actions .yt-uix-button-icon-watch-like {
    background: no-repeat url(//s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png) -75px -102px;
    width: 13px;
    height: 15px;
}

www-refresh-vflmpZ5kj.png 是一个精灵，背景声明将其定位在 -75px 和 -102px 位置，即竖起大拇指图标的位置。