使用全新安装的 Firefox,我看到带有这些图标/页面的起始页:
将鼠标悬停在“自定义 Firefox”框上,图像变为:
Hovering over Customize Firefox
Firefox 的正常行为是为起始页图像创建某种屏幕截图。但是,看起来可能有一种方法可以控制显示的图像以及将鼠标悬停在每个图像上时显示的内容。
在 Firefox 起始页上自定义图像需要哪些 HTML 标记或 HTTP header ?
更新:
仔细研究了一下,我看到了“Get Firefox for Android”选项的以下 HTML:
<div xmlns="http://www.w3.org/1999/xhtml" class="newtab-cell">
<div class="newtab-site" draggable="true" type="history" pinned="true">
<span class="newtab-sponsored">SPONSORED</span>
<a class="newtab-link" title="Get Firefox for Android http://mzl.la/1Dls1DC" href="http://mzl.la/1Dls1DC">
<span class="newtab-thumbnail placeholder"></span>
<span class="newtab-thumbnail thumbnail" style="background-image: url("https://tiles-cloudfront.cdn.mozilla.net/images/a15c0403863847aef5943a6272cd992335f330f9.59611.png");"></span>
<span class="newtab-thumbnail enhanced-content" style="background-image: url("https://tiles-cloudfront.cdn.mozilla.net/images/ef8c1bab9b54c37fddbd8eeb15faf733571fc9f9.64436.png");"></span>
<span class="newtab-title">Get Firefox for Android</span>
</a>
<input title="Unpin this site" class="newtab-control newtab-control-pin" type="button" />
<input title="Remove this site" class="newtab-control newtab-control-block" type="button" />
<span class="newtab-suggested"></span>
</div>
</div>
“正常”条目看起来更像这样:
<a xmlns="http://www.w3.org/1999/xhtml" class="newtab-link" title="Twilio Console https://www.twilio.com/console" href="https://www.twilio.com/console">
<span class="newtab-thumbnail placeholder"></span>
<span class="newtab-thumbnail thumbnail" style="background-image: url("moz-page-thumb://thumbnail/?url=https%3A%2F%2Fwww.twilio.com%2Fconsole&revision=4346");"></span>
<span class="newtab-thumbnail enhanced-content"></span>
<span class="newtab-title">twilio.com</span>
</a>
newtab-thumbnail thumbnail
跨度似乎是悬停的工作方式,newtab-thumbnail enhanced-content
跨度是显示的非悬停图像.
最佳答案
我只是猜测,因为我不确定这是否属实,但看起来新标签页的磁贴数据是通过 OpenGraph 提取的元数据标签。例如,在 MDN 页面上:
<meta property="og:type" content="website">
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:site_name" content="Mozilla Developer Network">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">
关于html - 如何告诉 Firefox 起始页使用特定图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42492491/