圖像顯示導航欄

Question

我想要一個導航欄來顯示圖像的一部分，但只顯示圖像，如果你當前在頁面上（比如說你點擊home，它會發現一部分圖片）。換句話說，我想要一個隱藏在欄中的圖像，只有當按鈕被點擊時纔會顯示圖像。 （每個按鈕都有自己的一張圖片。）

使用CSS和HTML可以做到這一點嗎？

代碼CSS導航欄：

@nav_bar_background: #000000 center center repeat-x scroll; 
@nav_bar_border: 0px solid @container_outer_border_color; 
@nav_bar_border_radius: 0 0 0 0; 
@nav_bar_button_color: #f2f3f5; 
@nav_bar_button_font: normal normal 15px Tahoma, Geneva, sans-serif; 
@nav_bar_button_decoration: none; 
@nav_bar_button_shadow: none; 
@nav_bar_button_background: #050505 fixed; 
@nav_bar_button_hover_color: @nav_bar_button_color; 
@nav_bar_button_hover_font: @nav_bar_button_font; 
@nav_bar_button_hover_decoration: @nav_bar_button_decoration; 
@nav_bar_button_hover_shadow: @nav_bar_button_shadow; 
@nav_bar_button_hover_background: @nav_bar_button_background; 
@nav_bar_button_current_color: #ffffff; 
@nav_bar_button_current_font: @nav_bar_button_font; 
@nav_bar_button_current_decoration: @nav_bar_button_decoration; 
@nav_bar_button_current_shadow: @nav_bar_button_shadow; 
@nav_bar_button_current_background: #790a79 center repeat-x scroll; 
@nav_bar_bubble_text_color: #ffffff; 
@nav_bar_bubble_font: .8em "Trebuchet MS", Verdana, Arial; 
@nav_bar_bubble_background: #790a79; 
@nav_bar_bubble_border_radius: 0; 
#navigation-menu { padding: 0 0px; background: @nav_bar_background; border: @nav_bar_border; .rounded-corners(@nav_bar_border_radius); } 
#navigation-menu a { position: relative; } 
#navigation-menu > ul, #navigation-menu > ul li { float: left; } 
#navigation-menu > ul li a { display: inline-block; padding: 0 .75em; color: @nav_bar_button_color; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background; line-height: 80px !important; width: auto } 
#navigation-menu > ul li:hover a { color: @nav_bar_button_hover_color !important; font: @nav_bar_button_hover_font; text-decoration: @nav_bar_button_hover_decoration !important; text-shadow: @nav_bar_button_hover_shadow; background: @nav_bar_button_hover_background; line-height: 80px !important; width:auto } 
#navigation-menu > ul li a.state-active { color: @nav_bar_button_current_color !important; font: @nav_bar_button_current_font; text-decoration: @nav_bar_button_current_decoration !important; text-shadow: @nav_bar_button_current_shadow; background: @nav_bar_button_current_background; line-height: 80px !important; width: auto} 
#navigation-menu div.tip-holder { position: absolute; top: 5px; right: -5px; display: inline-block; } 
#navigation-menu div.tip-holder div.tip-number { padding: 3px 7px 2px 7px; background-color: @nav_bar_bubble_background; .rounded-corners(@nav_bar_bubble_border_radius); font: @nav_bar_bubble_font; line-height: .8em; text-shadow: none; .box-shadow(2px, 2px, 2px, @shadow_color); height: .8em; color: @nav_bar_bubble_text_color; } 
#navigation-menu div.tip-holder span.tip { border-top: 4px solid @nav_bar_bubble_background; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; left: 6px; } 

Answer 1

簡單地講了背景圖像爲UL元素。
比在LI元素上留下了堅實的背景。在懸停或活動狀態下設置動畫透明度。

*{margin:0;padding:0;} 
 

 
nav ul{ 
 
    list-style:none; 
 
    background: url(http://lorempixel.com/output/food-q-c-640-480-9.jpg) 50%/cover; 
 
    overflow:auto; 
 
    display:table; 
 
    width:100%; 
 
} 
 
nav ul li{ 
 
    display:table-cell; 
 
} 
 
nav ul li a { 
 
    display:block; 
 
    text-align:center; 
 
    padding:2em 0; 
 
    background: rgba(255,255,255, 0.9); 
 
    transition: .3s; 
 
} 
 
nav ul li a:hover, 
 
nav ul li a.active{ 
 
    background: rgba(255,255,255, 0.1); 
 
    color: #fff; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#" class="active">HOME</a></li> 
 
    <li><a href="#">SANWDICHES</a></li> 
 
    <li><a href="#">GROCERY</a></li> 
 
    <li><a href="#">SHOP</a></li> 
 
    <li><a href="#">SWEETS</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
    </nav>

Answer 2

是。這可以使用精靈。你可以用CSS來做到這一點。

例如，假設我們有一個100px的圖像× 100px，並且我們有我們的包裝元素20px × 20px，所以我們可以一次顯示圖像的五分之一。

HTML：

<div class='wrapper'></div> 

CSS：

.wrapper { 
    width: 100px; 
    height: 20px; 
    background-image: url('my-image.png'); 
    background-repeat: no-repeat; 
    /* Initially, the image will be completely hidden */ 
    background-position: 0 20px; 
} 

.wrapper.state1 { 
    /* Show the top 20px of the image */ 
    background-position: 0 0; 
} 

.wrapper.state2 { 
    /* Show the middle 20px of the image */ 
    background-position: 0 -40px; 
} 

的jQuery：

這僅僅是一個你如何能交換類示範。但是任何改變父元素類的方法都應該足夠了。

$(document).on('click', '.wrapper', function() { 
    if ($(this).hasClass('state1')) { 
    $(this).addClass('state2').removeClass('state1'); 
    else if ($(this).hasClass('state2')) { 
    $(this).removeClass('state2'); 
    } else { 
    $(this).addClass('state1'); 
    } 
}