问题描述:

So I have a navigation menu. nav.png is empty space and nav1.png nav2.png nav3.png nav4.png are actual buttons like home,about us, etc.

I have the following code:

#navigation_bar {

display: table;

margin: 0 auto;

}

.menu_btn {

display: table-cell;

}

.menu_btn img {

height: 90%;

}

<div id="navigation_bar">

<div class="menu_btn">

<img src="http://i.stack.imgur.com/7q5bs.png">

</div>

<div class="menu_btn">

<img src="http://i.stack.imgur.com/wxDQj.png">

</div>

<div class="menu_btn">

<img src="http://i.stack.imgur.com/Fwmkn.png">

</div>

<div class="menu_btn">

<img src="http://i.stack.imgur.com/qRpbK.png">

</div>

<div class="menu_btn">

<img src="http://i.stack.imgur.com/GksMc.png">

</div>

<div class="menu_btn">

<img src="http://i.stack.imgur.com/7q5bs.png">

</div>

</div>

网友答案:

Let's modernise!

Let's make this with pure CSS:

Background CSS gradients and no images, mirrored using pseudo elements

We can achieve this even more easily by using a linear gradient background and no images at all.

  • The background is created by the linear-gradient.

  • The font can be changed in the CSS if desired.

  • The text is vertically centered with the line-height: 40px (matching the height of the nav)

  • The text is horizontally centered with text-align: center on the nav

Using the data-* and pseudo elements, we can even provide a mirror image underneath with pure CSS.

Main benefits:

  • Link text is easily archived by search engines, improving SEO and link text is easily read by screen-readers

  • Gradient and links can easily be changed without editing images

Complete Example

CSS gradients are supported IE10 + and IE 6 - 9 are supported using a filter. Ensure that there are no gaps between the opening and closing <a>. This prevents an inline gap.

nav {
  height: 40px;
  background: #000;/*Non supporting browsers*/
  background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);/*CSS Standard*/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /*IE6 - 9*/
  line-height: 40px;
  text-transform: uppercase;
  text-align: center;
  min-width: 620px;
    position: relative;
}
nav::before {
  background: linear-gradient(to top, rgba(76, 76, 76, 0) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);/*CSS Standard*/
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}
nav a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2em;
  border-right: solid 1px #FFF;
  padding: 0 10px;
  position: relative;
  display: inline-block;
}
nav a:first-child {
  border-left: solid 1px #FFF;
}
nav a:hover {
background: #F00;  
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);
}
nav a::before {
content: attr(data-mirror); 
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0 10px;
  color: #000;
  transform: scaleY(-1);
  color: #FFF;
  opacity: 0.2;
  pointer-events: none;
}
nav a:hover::before { 
  background: rgba(255,255,255,0.2);
    opacity: 0.5;
}
<nav>
  <a href="#" data-mirror="Home">Home</a><a href="#" data-mirror="Categories">Categories</a><a href="#" data-mirror="Create">Create</a><a href="#" data-mirror="Upload">Upload</a>
</nav>
网友答案:

Take the background-image approach.

#navigation_bar {
  background-image: url(http://i.stack.imgur.com/7q5bs.png);
  background-repeat: repeat-x;
  text-align:center;  
}

.menu_btn {
  display:inline-block;
}

.menu_btn img {
  height: 90%;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>GETTING STARTED WITH BRACKETS</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="content">
            <img src="images/logo/logo.png">
        </div>
        <hr>
        <div id="navigation_bar">
            <div class="menu_btn"><img src="http://i.stack.imgur.com/wxDQj.png" /></div>
            <div class="menu_btn"><img src="http://i.stack.imgur.com/Fwmkn.png" /></div>
            <div class="menu_btn"><img src="http://i.stack.imgur.com/qRpbK.png" /></div>
            <div class="menu_btn"><img src="http://i.stack.imgur.com/GksMc.png" /></div>
        </div>
        <hr>
    </body>
</html>
相关阅读:
Top