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

Question

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

这是目前的样子：

我希望它看起来像这样：

感谢任何帮助！

Answer 1

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

在浏览器中打开文档并右键单击标题。 Select 检查元素 以识别它。在你的情况下，我们想用 class .title.

#header

h1

改变元素！例如：

<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>

此代码进入您的 rmarkdown 文档，没有任何包装。您可以将它放在 YAML header 的正下方，甚至可以使用 extern .css 文件来包含它（查看 YAML 选项以包含样式表）。

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

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

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

How to change the background color of title section of html report

r

r-markdown

background-color

page-title