Question

我正在尝试构建导航菜单。这是一些部分。

#main-menu .nav-bar { list-style:none; margin-top: 40px;}
    #main-menu .nav-bar li { display:inline; padding:0 10px;}
    
      #main-menu .nav-bar li a {
      text-decoration: none;
      padding-left: 50px;
      text-transform: uppercase;
      color: #333;
      display: inline-block;
      text-shadow: 1px 1px 1px #ccc;
    }

        .nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px transparent;}

     <nav id="main-menu">
         <ul class="nav-bar">
              <li class="nav-button-home"><a href="#">Home</a></li>
         </ul>
    </nav>

如果li元素不足以显示图片，会发生什么。任何想法如何增加高度li元素将如何显示整个图片？

由于

Answer 1

我认为没有办法让你的动态拉伸到背景图像的大小。你可以轻松地反过来，为你的li设置一个明确的高度，然后将你的背景设置为'包含'。这样可以缩小图像以适应你的li而不会剪裁。

Updated jsFiddle

CSS

  li {

height:180px;
width:240px;
background-image: url("http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303");
background-size: contain;
background-repeat: no-repeat;
border:1px solid #656565;
display:inline-block;
position:relative;

}

span {
    position:absolute;
    top:140px;
    width:100%;
    text-align:center;
    background-color:rgba(255, 255, 255, 0.9);
    padding:10px 0 10px 0;
    border:1px solid #656565;
}

Answer 2

删除背景属性＆＃34;透明＆＃34;

＆＃13;

#main-menu .nav-bar { list-style:none; margin-top: 40px;}
    #main-menu .nav-bar li { display:inline; padding:0 10px;}
    
      #main-menu .nav-bar li a {
      text-decoration: none;
      padding-left: 50px;
      text-transform: uppercase;
      color: #333;
      display: inline-block;
      text-shadow: 1px 1px 1px #ccc;
    }

        .nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px;}

＆＃13;

     <nav id="main-menu">
         <ul class="nav-bar">
              <li class="nav-button-home"><a href="#">Home</a></li>
         </ul>
    </nav>

＆＃13;

Answer 3

     <style type="text/css">
    body { font-family: sans-serif; }

    #main-menu .nav-bar { list-style:none; margin-top: 40px; }
    #main-menu .nav-bar li { display:inline; padding:0px 30px; }

    #main-menu .nav-bar li a {
      height:48px;
      width:48px;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
      text-decoration: none;
      padding-left: 25px;
      text-transform: uppercase;
      color: #333;
      text-shadow: 1px 1px 1px #ccc;
      position:relative;

    }

    .nav-bar .nav-button-home a { background:url("commons/imgs/prism/home.png") 0px -0px; }
    .nav-bar .nav-button-assets a { background:url("commons/imgs/prism/assets.png") 0px -0px; }
    .nav-bar .nav-button-alarms a { background:url("commons/imgs/prism/alarms.jpg") 0px -0px; }
    span {
        position:absolute;
        top:50px;
        left:0px;
        width:100%;
        text-align:left;
        padding:10px 0 10px 0;
    }

</style>

<nav id="main-menu">
     <ul class="nav-bar">
         <li class="nav-button-home"><a href="#"><span>Home</span></a></li>
         <li class="nav-button-assets"><a href="#"><span>Assets</span></a></li>
         <li class="nav-button-alarms"><a href="#"><span>Alarms</span></a></li>
     </ul>
</nav>

我遇到的唯一问题是文本中心未与图像中心完全对齐。

CSS - li元素集高度

3 个答案: