如何移除R Markdown生成HTML中的标签页背景色？

我在R Markdown中添加了“Report Overview”和“Breakdown”标签页组（.tabset），还新增了一组自定义按钮标签页来展示不同表格。但编织生成HTML时出现了有色背景，尝试在标签页组中使用.transparent类仍无法移除该背景色。

需要移除的背景色效果：标签页区域存在灰色（对应截图中的有色）背景块

用户提供的原始代码：

---
title: "Predictions"
output: 
  html_document:
    code_folding: hide
---

##  {.tabset}

### Report Overview 

We show a scatter plot in this section.


### Breakdown  

We show the data in this tab.


<style>
.tablink {
  background-color: #1FA8ED;
  color: black;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 60px 65px;
  font-size: 70px;
  width: 80%;
  transition: 0.3s;
}

.tablink:hover {
  background-color: #1FA8ED;
}

.active {
  background-color: #1FA8ED;
  color: white;
}


</style>

<script type="text/javascript">
 function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
 }
 
 function openTab(evt, tabName, sourceImg) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
    document.getElementById('source-img').src = sourceImg;
}
 
</script>

#### Sources {.tabset .transparent}



<div style="float:left;width:125px;">
<img id="source-img" src="C:/Users/leonardo.urbiola_fox/Downloads/leads_projections/Predictions2/graph.png" style="width: 125px; height: auto; display: block; margin: auto;"/>
</div>

<button class="tablinks" onclick="openTab(event, 'ads', 'C:/Users/leonardo.urbiola_fox/Downloads/leads_projections/Predictions2/googleads.png'  )">Google Ads</button>

<button class="tablinks" onclick="openTab(event, 'lsa', 'C:/Users/leonardo.urbiola_fox/Downloads/leads_projections/Predictions2/googlelsa.png')">Google LSA</button>


<button class="tablinks" onclick="openTab(event, 'wgl', 'C:/Users/leonardo.urbiola_fox/Downloads/leads_projections/Predictions2/WeGetLeads.png')">We Get Leads</button>

<button class="tablinks" onclick="openTab(event, 'pest', 'C:/Users/leonardo.urbiola_fox/Downloads/leads_projections/Predictions2/PESTNET.png')">PestNet</button>

<div id="ads" class="tabcontent">
  <h3>Google Ads</h3>

问题根源是html_document的默认主题会给.tabset标签页容器、内容区添加背景样式，同时自定义按钮标签页的样式也可能和默认规则冲突。通过添加高优先级CSS规则即可覆盖：

1. 补充CSS样式 #

在原有<style>标签中添加以下代码，移除所有标签页相关的背景色：

/* 移除默认tabset标签页的背景与边框 */
.nav-tabs > li > a, .nav-tabs {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* 移除默认tabset内容区背景 */
.tab-content {
  background-color: transparent !important;
}

/* 移除自定义标签内容区背景 */
.tabcontent {
  background-color: transparent !important;
}

/* 确保.transparent类的tabset组完全透明 */
.tabset.transparent .nav-tabs,
.tabset.transparent .tab-content {
  background-color: transparent !important;
}

2. 完整修正后的代码 #

---
title: "Predictions"
output: 
  html_document:
    code_folding: hide
---

##  {.tabset}

### Report Overview 

We show a scatter plot in this section.


### Breakdown  

We show the data in this tab.


<style>
/* 移除默认tabset的背景样式 */
.nav-tabs > li > a, .nav-tabs {
  background-color: transparent !important;
  border-color: transparent !important;
}

.tab-content {
  background-color: transparent !important;
}

/* 自定义按钮样式 */
.tablink {
  background-color: #1FA8ED;
  color: black;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 60px 65px;
  font-size: 70px;
  width: 80%;
  transition: 0.3s;
}

.tablink:hover {
  background-color: #1FA8ED;
}

.active {
  background-color: #1FA8ED;
  color: white;
}

/* 自定义标签内容背景透明 */
.tabcontent {
  background-color: transparent !important;
}

/* 确保transparent类的tabset生效 */
.tabset.transparent .nav-tabs,
.tabset.transparent .tab-content {
  background-color: transparent !important;
}

</style>

<script type="text/javascript">
 function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
 }
 
 function openTab(evt, tabName, sourceImg) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
    document.getElementById('source-img').src = sourceImg;
}
 
</script>

#### Sources {.tabset .transparent}

<div style="float:left;width:125px;">
<img id="source-img" src="C:/Users/leonardo.urbiola_fox/Downloads/leads_projections/Predictions2/graph.png" style="width: 125px; height: auto; display: block; margin: auto;"/>
</div>

<button class="tablinks" onclick="openTab(event, 'ads', 'C:/Users/leonardo.urbiola_fox/Downloads/leads_projections/Predictions2/googleads.png'  )">Google Ads</button>

<button class="tablinks" onclick="openTab(event, 'lsa', 'C:/Users/leonardo.urbiola_fox/Downloads/leads_projections/Predictions2/googlelsa.png')">Google LSA</button>

<button class="tablinks" onclick="openTab(event, 'wgl', 'C:/Users/leonardo.urbiola_fox/Downloads/leads_projections/Predictions2/WeGetLeads.png')">We Get Leads</button>

<button class="tablinks" onclick="openTab(event, 'pest', 'C:/Users/leonardo.urbiola_fox/Downloads/leads_projections/Predictions2/PESTNET.png')">PestNet</button>

<div id="ads" class="tabcontent">
  <h3>Google Ads</h3>
</div>
<div id="lsa" class="tabcontent" style="display:none;">
  <h3>Google LSA</h3>
</div>
<div id="wgl" class="tabcontent" style="display:none;">
  <h3>We Get Leads</h3>
</div>
<div id="pest" class="tabcontent" style="display:none;">
  <h3>PestNet</h3>
</div>

注：补充了自定义标签页内容的闭合标签，避免HTML结构不完整导致的样式异常。

内容的提问来源于stack exchange，提问作者Leonardo Urbiola