这个网站如何渲染图片？

Question

我正在为youtube.com编写一个用户脚本，并希望插入一个按钮，其外观和感觉与YouTube页面上的其他按钮相同。过去事情一直在起作用，但突然停止了工作。看看这张图片中任何youtube视频上面的按钮：

​

​

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

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

1. 他们是怎么做到的？
2. 如何通过CSS/javascript获得这些最终呈现的图像？

谢谢!

P.S.：

一个版主想要结束这个问题，说这不是一个编程问题，而是一个问题。要知道如何实现这种“无法检测”的html图像，或者用户脚本如何仍然通过javascript/html/css获取该图像。

• 如果版主想结束这个问题，说它太具体(关于youtube.com)，它不是。这是一个关于HTML的普遍问题，但到目前为止，我只看到YouTube实现了它。我是个新手。

谢谢,

毛绒

Answer 1

这种技术被称为CSS精灵。它用于减少HTTP请求的数量。

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

因此，重要的部分是：

• 将图像设置为背景
• 为您的元素设置大小。由于图像被用作背景，它将不会隐式地具有来自图像的大小！
• 设置背景位置规则

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

​

​

图像大小为16 so /16 so，"plus“图标的顶部/左侧位于97 so/66 so位置，因此它们使用以下背景位置值：

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精灵:图像切片的死亡之吻
• CSS精灵之谜

发电机：

• 在线CSS雪碧发生器

Answer 2

这种技术被称为"CSS精灵“：

• 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

他们使用一幅有所有背景的图像，并使用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。

这是我的自定义按钮，只是为了显示它的工作原理;)

​

​