Question

我正在为youtube.com编写用户脚本，并希望插入一个与YouTube页面上其他按钮具有相同外观的按钮。事情在过去是有效的，但突然停止了工作。在任何YouTube视频的顶部看一下此图片中的按钮：

YoutubeTopButtons

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

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

他们是怎么做到的？
如何通过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

enter image description here

图像尺寸为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;

进一步阅读：

发生器：

Online CSS Sprites Generator

Answer 2

这种技术被称为“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。

这是我的自定义按钮，只是为了表明它有效;）

enter image description here

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，这是竖起大拇指图标的位置。

这个网站如何呈现图像？

4 个答案: