Как изменить цвет фона заголовка раздела HTML-отчета

Question

Я создаю интерактивный HTML-документ, используя разметку R, и не могу понять, как добавить цвет фона только в раздел заголовка.Я видел сообщения о том, как изменить цвет фона разных кусков, но я хочу применять цвет только там, где появляется заголовок.Первоначально я использовал пакет html pretty, который сделал это для меня, но он не был совместим с некоторыми функциями, которые мне нужно было добавить в отчет, поэтому теперь мне нужно найти способ добавить цвет обратно вручную.

Вот как это выглядит в настоящее время:

, и я хочу, чтобы это выглядело так:

Любойпомощь приветствуется!

Answer 1

Используйте свой собственный код CSS для изменения дизайна.

1. Откройте ваш документ в браузере и щелкните правой кнопкой мыши на заголовке.Выберите Проверка элемента , чтобы определить его.В вашем случае мы хотим изменить #header и содержащий h1 с классом .title.

2. Изменить элементы!Например:

   <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 или даже включить его с помощью файла extern .css (отметьте опцию YAML, чтобы включить таблицы стилей).

Код для градиента фона можно легко сгенерировать с помощьюонлайн-инструмент, такой как http://www.colorzilla.com/gradient-editor/.

Хорошим справочником по использованию CSS является https://www.w3schools.com/Css/.