How to make toolbar, header, ion-segments/buttons transparent

I’m trying to set the background of my ion-segment-buttons to transparent, so that the background being set behind these elements shows through. Can someone provide me an example of this? I have tried doing something like :

<ion-header>
  <ion-toolbar mode="md" style="background-color: transparent !important;">
    <ion-segment style="background-color: transparent !important;" mode="md">
      <ion-segment-button style="background-color: transparent !important;" value="future" checked>
        <ion-label style="background-color: transparent !important;">Future</ion-label>
      </ion-segment-button>
      <ion-segment-button style="background-color: transparent !important;" value="history">
        <ion-label style="background-color: transparent !important;">History</ion-label>
      </ion-segment-button>
      <ion-segment-button style="background-color: transparent !important;" value="matrix">
        <ion-label style="background-color: transparent !important;">Matrix</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content style="background: red;">

</ion-content>

In this example, I would like to show the segments as red matching the colors in the background, however, what I’m left with is:

image

Use background instead of background-color and you can use custom scss variables of ionic components. where as you can change the color selected etc etc