透明差距

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>