Прозрачный разрыв в панели навигации

Question

Я пытаюсь сделать так, что существует разрыв (но без установки цвета, к тому же в качестве фона) на панели навигации, где выбранная текущая вкладка является ...

Чтобы объяснить более подробно, мне нужно сделать вкладку «Моя страница» (текущая выбранная вкладка) прозрачной вкладкой, однако она должна отображать цвет фона вместо цвета панели навигации, который находится за ним.

Answer 1

Для этого вам нужно добавить один пустой элемент. Убедитесь, что ни один из предков вашего элемента навигации не имеет фона, кроме того, который вы хотите показать на вкладке.

http://tinker.io/a5458

body { 
    background: #F58B73; 
} 

.nav-links { 
    display: table; 
    width: 100%; 
    table-layout: fixed; /* could use `white-space: pre` instead */ 
} 

.nav-button { 
    display: table-cell; 
    width: 140px; 
    height: 30px; 
    padding-top: 10px; 
    padding-left: 20px; 
    background: #231F20; 
    color: #FFFFFF; 
    text-decoration: none; 
} 

.spacer { 
    background: #231F20; 
    width: 100%; 
    display: table-cell; 
} 

.nav-button-selected { 
    background: transparent; 
} 

     <div class="nav-links pull-right"> 
      <div class="spacer"></div> 
      <a href="#" class="nav-button nav-button-selected">Who I am</a> 
      <a href="#" class="nav-button">What I do</a> 
      <a href="#" class="nav-button">How to contact me</a> 
     </div>