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

这是该按钮的图像精灵：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; 
}

Answer 2

该技术称为CSS Sprites。在该技术中，所有图像被组合为一个图像，并且被调用到他们需要的特定位置。

这样做的好处是减少了http请求并加快了网页的加载时间。供参考：http://www.w3schools.com/css/css_image_sprites.asp

YouTube的搜索按钮css如何运作？

2 个答案: