图像显示导航栏

Question

我想要一个导航栏来显示图像的一部分，但只显示当前在页面上的图像（比如你点击主页，它会发现图片的一部分）。换句话说，我想要一个隐藏在栏中的图像，只有在点击按钮时才显示。 （每个按钮都有自己的图片。）

是否可以使用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');
  }
}