这个网站如何渲染图像？

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

YoutubeTopButtons

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

来源

2012-03-02 Piyush Soni

有很多答案在这里，但基本上所有你需要做的就是给你的按钮CSS类'YT-UIX-button'。请参阅下面的答案。 – 2012-03-02 08:34:46

GGG，我已经在做完美的工作，最近停止工作。因此，这个问题。 – 2012-03-02 10:04:53

你说得对，我很抱歉，你需要添加'yt-uix-button'和'yt-uix-button-default'作为CSS类名。我会更新我的答案。 – 2012-03-02 10:06:43

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

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

所以重要的部分是：

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

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

enter image description here

的图像是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;

进一步阅读：

发生器：

Online CSS Sprites Generator

来源

2012-03-02 08:21:39

您可以使用命令行工具[glue]（http://glue.readthedocs.org/en/latest/index.html）轻松制作您自己的精灵。 – 2012-03-02 08:23:54

然而，三角形是使用边框的纯CSS。 http://css-tricks.com/snippets/css/css-triangle/ – blackpla9ue 2012-03-02 08:32:51

嗨迪迪尔，非常感谢您的详细解答。现在我明白了！ :) – 2012-03-02 10:11:53

这种技术被称为 “CSS子画面”：

他们使用one image with all the backgrounds，并使用CSS来设置元素的高度和宽度，在某种程度上的背景是定位只有它的一部分被揭示。

在YouTube的情况下，它们似乎在使用1x1空白<img>，并且正在设置img标签本身的背景图像。

来源

2012-03-02 08:22:37

啊。这是另一个有用的信息Madmartigan。非常感谢。学习是美好的:) – 2012-03-02 10:19:07

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

来源

2012-03-02 08:24:12 treeface

感谢treeface，我实际上正在研究它并使用它们自己的CSS，但现在我知道除了yt-uix-button类之外，我不得不使用yt-uix-button-默认类也是！ - 他们最近改变的东西。 – 2012-03-02 10:31:00

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

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

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

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

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

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

enter image description here

来源

2012-03-02 08:24:25

嗨GGG，谢谢。我也注意到CSS类的名称已经改变了，但是即使在改变它们之后它也不起作用。我会再尝试。我已经使用了yt-uix-button。 – 2012-03-02 10:10:19

@PiyushSoni'class =“yt-uix-button yt-uix-button-default”'适合我，我只是测试过它。但是，如果没有'yt-uix-button-default'，它不起作用。 – 2012-03-02 10:13:58

你真棒！ :)是的，只要我添加了'默认'的东西，它就像之前一样开始工作！精彩。非常感谢:) – 2012-03-02 10:18:00

这个网站如何渲染图像？

回答

相关问题