Question

我想知道网站如何更改Chrome中顶栏的颜色。

此处 - 顶部 - 您可以看到多边形导航颜色（黑色）也设置为chrome导航（链接所在的位置）的颜色。用css怎么做？提前谢谢！

Answer 1

从Lollipop上的Chrome for Android版本39开始，您现在就可以了   能够使用theme-color元标记设置工具栏颜色 - 这个   意味着没有更多的西雅图灰色工具栏！语法非常简单：添加   带有<head>的网页name="theme-color"的元标记，并设置   content到任何有效的CSS颜色。



例如，将背景设置为您喜欢的颜色或   HTML5Rocks橙色：

<meta name="theme-color" content="#db5945">

此外，Chrome还会展示漂亮的高分量优惠   提供。 Chrome for Android会选择您最高的res图标   提供，我们建议提供192×192px PNG文件。例如：

<link rel="icon" sizes="192x192" href="nice-highres.png">

在HTML5Rocks以及Web Fundamentals site上查看主题颜色，并确保查看Add to home screen docs了解更多方法，让您的网站脱颖而出。

来源： https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Answer 2

如果你使用像realfavicongenerator.net这样的东西来创建你的图标，你也可以选择配置你的主题颜色（它被称为切换器，可以从棒棒糖上获得）。如果您想手动完成，只需将其包含在标题中：

 <meta name="theme-color" content="#ffffff">

Answer 3

这取决于顶栏使用的CSS样式，例如，如果它使用样式＆＃34; bar＆＃34;它会在你的CSS文件中看起来像这样：

bar {
    background-color: black;
}

移动版铬中的顶栏中的颜色

3 个答案: