Question

我无法弄清楚为什么我的背景图片没有显示在导航栏的右上角。移动视图显示图像，但我的桌面视图正在绘制空白。仅供参考，我正在使用wp启动主题，FoundationPress。任何指导将不胜感激！感谢。

<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
  <?php do_action('foundationPress_layout_start'); ?>
      <nav class="tab-bar show-for-small-only">
        <section class="right-small">
          <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
        </section>
          <section class="middle tab-bar-section">
             <!--  Top right logo mobile-->
               <a href="#">
                  <div class="title logo"></div><!-- This one shows up on mobile view-->
               </a>
          </section>
      </nav>

      <aside class="right-off-canvas-menu">
        <?php foundationPress_mobile_off_canvas(); ?>
      </aside>

    <div class="top-bar-container contain-to-grid show-for-medium-up">
        <nav class="top-bar">
            <ul class="title-area">
                <li class="name"><a href="#" class="m-desk-logo"></a> <!--  This doesn't show up on desktop view-->
                </li>
            </ul>
            <section class="top-bar-section">
                <?php foundationPress_top_bar_l(); ?>
                <?php foundationPress_top_bar_r(); ?>
            </section>
        </nav>
    </div>

css：

.m-desk-logo {
    background: url("../assets/img/main-nav-cwk-carrot-logo.png") no-repeat;
    background-size: contain;
     width: 100%;
}

jsbin example

Answer 1

它适用于jsbin。按Shift + F5（清除缓存）。

Answer 2

好吧，如果我改变了few things around

，它会为我工作

on css

.m-desk-logo {
background-size: 100px;
width: 100px;
height: 200px;
}

在html上没有必要在a

中添加一个span

<li  class="name m-desk-logo"><a href="#"></a>

background-size contains仅在您设置高度和宽度时才有效！问题的一部分是李因某种原因没有溢出......

Answer 3

使span成为一个块元素，以便能够看到背景img

.m-desk-logo {
   background: url(http://upload.wikimedia.org/wikipedia/commons/2/20/Ursus_maritimus_us_fish.jpg) no-repeat;
   height:45px;
   display:block;
}

背景图像不显示在导航中

3 个答案: