这个网站如何渲染图像？

Question

我正在为youtube.com写一个用户脚本，并且想要插入一个与YouTube页面上的其他按钮具有相同外观的按钮。事情在过去有效，但突然停止了工作。 看一看的按钮在这个形象上的任何YouTube视频的顶部：

所以我只是在Firebug注意到一两件事，这些按钮包括文字和图像子节点，但不渲染图像就像给他们一个源图像网址一样简单。这些图像的'src'属性（'plus'符号图像或'down arrow'图像）或所有其他此类图像具有完全相同的URL（1 x 1图像）：//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的实现。我是新手。

谢谢
的Piyush

Answer 1

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

基本上，你只有一个图像与所有的图标（因此你只需要从服务器加载一个图像）。您可以将此图像用作元素上的背景图像，该图像具有根据图标大小定义的宽度/高度来显示并使用css属性background-position进行播放，以将背景放置在图标的顶部/左侧以显示在背景图。

所以重要的部分是：

• 设置图片为背景
• 设置大小来你的元素。由于图像被用作背景，它不会从图像中隐含大小！
• 设置背景位置规则

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

的图像是16像素/ 16像素的尺寸和上/左“加”图标的位于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子画面”：

• 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

查看该标记的CSS声明。例如，像按钮有这个网站：

<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-刷新vflmpZ5kj.png是一个精灵，并在后台声明的位置吧 - 75px和-102px这是竖起大拇指图标的位置。

Answer 4

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

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

事情在过去工作，但突然停止工作。

是的，他们在最后一次大的更新期间改变了类名。

如您在评论中指出的那样，此前课程仅为yt-uix-button，现在您还必须添加yt-uix-button-default。

---

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