如何更改html报告标题部分的背景颜色

Question

我正在使用R markdown创建交互式HTML文档，我无法弄清楚如何仅向标题部分添加背景颜色。我已经看过有关如何更改不同块的背景颜色的帖子，但我想仅将颜色应用于标题出现的位置。我最初使用html漂亮的软件包为我做了这个，但它与我需要添加到报告中的一些功能兼容，所以现在我必须找到一种方法来手动添加颜色。

目前的情况如下：

我希望它看起来像这样：

感谢任何帮助！

Answer 1

使用您自己的CSS代码来改变设计。

1. 在浏览器中打开文档，然后右键单击标题。 选择检查元素以识别它。在您的情况下，我们希望更改#header和包含h1的{​​{1}}类。

2. 改变元素！例如：

   .title

此代码进入您的rmarkdown文档，没有任何包装。你可以把它放在YAML标题下面，甚至可以使用extern <style> #header { background: #2274cc; /* Old browsers */ background: -moz-linear-gradient(left, #2274cc 0%, #26c5d3 36%, #61bf61 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #2274cc 0%,#26c5d3 36%,#61bf61 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #2274cc 0%,#26c5d3 36%,#61bf61 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2274cc', endColorstr='#61bf61',GradientType=1 ); /* IE6-9 */ color: white; height: 100px; display:flex; align-items: center; justify-content: center; } h1.title { margin: auto; } </style> 文件包含它（查看YAML选项以包含样式表）。

使用http://www.colorzilla.com/gradient-editor/等在线工具可以轻松生成背景渐变的代码。

如何使用CSS的一个很好的参考是https://www.w3schools.com/Css/。