这个网站是如何渲染图片的？

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获取这些最终呈现的图像？ 谢谢！ P.S .： -如果管理员想要关闭此问题，表示这不是编程问题，请注意。要了解如何实现这种“不可检测”的HTML图像问题，或者用户脚本如何仍然通过javascript / html / css获取该图像。 -如果管理员想要关闭此问题，表示它太具体（关于youtube.com），那么不是。这是有关HTML的一般问题，但是迄今为止我只看过YouTube实现过。我是一个初学者。 谢谢， Piyush

- Piyush Soni

---

这里有很多答案，但基本上你只需要给你的按钮一个CSS类yt-uix-button。请参见下面的答案。 - Dagg Nabbit

GGG，我之前一直在做同样的事情，一直都很顺利，但最近突然不行了。因此我才问这个问题。 - Piyush Soni

你是对的，我很抱歉，你需要将 yt-uix-button 和 yt-uix-button-default 两个 CSS 类名都添加上。我会更新我的回答。 - Dagg Nabbit

Answer 1

这种技术被称为CSS精灵，用于减少HTTP请求量。基本上，您只需要一个带有所有图标的图像（因此只需要从服务器加载一个图像）。您会将此图像用作具有已定义宽度/高度的元素的背景图像以显示和使用css属性“background-position”在要在背景图像中显示的图标的顶部/左侧放置背景。因此，重要的部分是：1. 将图像设置为背景；2. 为元素设置大小。由于图片用作背景，因此不会从图片中隐含地获得大小！3. 设置background-position规则。YouTube使用以下图像：http://s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png 图像的大小为16px / 16px，“加号”图标的左上角位于位置97px / 66px，因此他们使用以下background-position值：

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：图片裁剪的致命之吻
• CSS sprites之谜

生成器:

• 在线CSS Sprites生成器

- Didier Ghys

---

你可以使用命令行工具glue轻松制作自己的精灵。 - darryn.ten

三角形是使用边框的纯CSS实现的。http://css-tricks.com/snippets/css/css-triangle/ - Malitta N

嗨Didier，非常感谢你详细的回答。现在我明白了！！ :) - Piyush Soni

黑瘟疫，是的！你说得对！谢谢你提供的链接！现在我可以同时采纳你们两个的建议了！ :) - Piyush Soni

@treeface，我们怎么做呢？:P ... 我想将其中两个评论标记为答案。 - Piyush Soni

完成了。谢谢！但是在Stack Overflow上似乎没有“主要”和“辅助”答案的概念。它不允许我选择两个答案。没关系。 - Piyush Soni

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标签本身上设置背景图像。

- Wesley Murch

---

啊，Madmartigan，这是另一组有用的信息。非常感谢。学习真是太棒了 :) - Piyush Soni

Answer 3

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

只需给您的按钮添加一个类yt-uix-button yt-uix-button-default，它就会具有其他按钮的相同外观和感觉。我在自己的YouTube用户脚本中也是这样做的。

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

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

以前的类只是yt-uix-button，就像您在评论中指出的那样，现在您还必须添加yt-uix-button-default。

---

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

- Dagg Nabbit

---

嗨GGG，谢谢。我也注意到CSS类名已经改变了，但即使我改变它们，它仍然不起作用。我会再试一次。我已经在使用yt-uix-button了。 - Piyush Soni

@PiyushSoni class="yt-uix-button yt-uix-button-default" 对我有效，我刚测试了一下。不过如果没有yt-uix-button-default就不行。 - Dagg Nabbit

你太棒了！ :) 是的，一旦我添加了“默认”的东西，它就像以前一样开始工作了！太好了。非常感谢 :) - Piyush Soni

嗨GGG，我本来会把你的回复标记为答案，因为是你帮我解决了实际问题。但是我回去看了一下自己的问题，似乎我把它作为一个普遍性问题来构思，而Didier的答案可能更适合公众的目的。希望你不介意。再次感谢。 - Piyush Soni

@PiyushSoni 无论你认为什么最好。我想人们选择给出一般性的答案，因为他们没有一个特定的答案给你，而且他们有机会制作漂亮的图片并吸引赞成票 ;) - Dagg Nabbit

Answer 4

看一下那个标签的CSS声明。例如，点赞按钮有这个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，这是赞图标的位置。

- treeface

---

谢谢treeface，我实际上正在研究并使用他们自己的CSS，但现在我知道除了yt-uix-button类之外，我还必须使用yt-uix-button-default类！-这是他们最近更改的内容。 - Piyush Soni