这个网站如何呈现图像？
Piy*_*oni 3 html javascript css image
我正在为youtube.com编写用户脚本,并希望插入一个与YouTube页面上其他按钮具有相同外观的按钮.事情在过去是有效的,但突然停止了工作.在任何YouTube视频的顶部看一下此图片中的按钮:
所以我在Firebug中注意到了一件事,这些按钮包括文本和图像子节点,但是渲染图像并不像给它们提供源图像URL那么简单.这些图像的'src'属性('加号'图像,或'向下箭头'图像)或所有其他此类图像具有完全相同的URL(1 x 1图像)://s.ytimg.com /yt/img/pixel-vfl3z5WfW.gif.但最终它们被呈现为所有这些不同的图像.因此,当我在我的按钮中执行相同操作时,所有其他CSS属性都可以正常工作,但图像只是空白.
我只想知道html/javascript/css专家 -
- 他们是怎么做到的？
- 如何通过CSS/javascript获取这些最终渲染的图像？
谢谢!
PS:
- 如果主持人想要关闭这个问题,说它不是编程问题,那就是.要知道如何才能实现这种"不可检测的"html图像,或者用户脚本如何通过javascript/html/css仍能获取该图像.
- 如果主持人想要关闭这个问题,说它太具体了(关于youtube.com),事实并非如此.这是一个关于HTML的一般性问题,但我看到目前为止仅由YouTube实施.我是新手.
谢谢,
Piyush
这种技术称为CSS精灵.它用于减少HTTP请求的数量.
基本上,您只有一个图像包含所有图标(因此您只需要从服务器加载一个图像).您可以将此图像用作元素上的背景图像,其宽度/高度定义为要显示的图标大小,并使用css属性background-position进行播放,将背景放置在图标的顶部/左侧以在背景中显示图片.
所以重要的部分是:
- 将图像设置为背景
- 为元素设置大小.由于图像用作背景,因此它不会隐含地具有图像的大小!
- 设置背景位置规则
YouTube正在使用以下图片:http://s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png
图像尺寸为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;
进一步阅读:
发电机: