html - YouTube 的搜索按钮 CSS 是如何工作的？

Question

我一直在尝试弄清楚 YouTube 上的搜索按钮(放大镜按钮)的样式，经过检查，它只是一个按钮:

   <button class="yt-uix-button yt-uix-button-size-default yt-uix-button-default search-btn-component search-button" type="submit" onclick="if (document.getElementById('masthead-search-term').value == '') return false; document.getElementById('masthead-search').submit(); return false;;return true;" dir="ltr" id="search-btn" tabindex="2"><span class="yt-uix-button-content">Search</span></button>

我一直在试图找出放大镜图像的来源，因为没有图像来源。据我所知，按钮范围的类“yt-uix-button-content”正在提供来自 this sheet 的图像。 。

这种技术叫什么？它是如何工作的？还是我找错了树？

Answer 1

这是该按钮的图像 Sprite :https://s.ytimg.com/yts/imgbin/www-hitchhiker-2x-vflPBoHOV.webp

CSS 允许您定义元素(搜索按钮)的“背景图像”、“背景位置”和按钮的宽度。

使用它，您可以更改背景位置坐标，并且可以从单个图像显示网站的所有图像。

这样做的优点是因为这样就只有一个 HTTP 请求，而不是所有这些图像的数百个请求。

我发现这个 jsfiddle 可能有帮助:http://jsfiddle.net/2zLfsm02/

.test:hover, button:hover span.test{
  background: url("https://s.ytimg.com/yts/imgbin/www-hitchhiker-vflKml5Tv.png") no-repeat scroll -128px -298px rgba(0, 0, 0, 0) !important; 
}