Question

在安装了Twitter Bootstrap gem的Ruby on Rails Spree应用程序中，我的标题有以下代码：

<body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">

<%= render :partial => 'spree/shared/header' %>
 (...)
</body>

其中shared / header如下所示：

<div class="container header">

    <header id="header" data-hook>
        <div class="container">
            <figure id="logo" class="text-center col-md-4" data-hook>
                <%= logo('store/Logo.png') %>
            </figure>
            <%= render :partial => 'spree/shared/nav_bar' %>
            <%= render :partial => 'spree/shared/main_nav_bar' if store_menu? %>
        </div>
    </header>


</div>

徽标已加载到figure标记中。

我想要做的是徽标将向下延伸并成为背景的一部分。例如，

Like this

我怎样才能做到这一点？我是否需要将其作为标题和正文背景的一部分？或者我应该在整个页面上使用CSS背景？如果是这样，我怎样才能让它重新调整页面？

我希望有人能指出我正确的方向！

/编辑生成的HTML：

<body class="one-col" id="default" data-hook="body">

  <div class="container header">

    <header id="header" data-hook>
        <div class="container">
            <figure id="logo" class="text-center col-md-4" data-hook>
                <a href="/"><img alt="Logo" src="/assets/store/Logo-c0fd8c5c71ef79825dba0315b84bdef5.png" /></a>
            </figure>

  <ul id="nav-bar" class="nav navbar-nav navbar-right" data-hook>
<li><a href="/account">My Account</a></li>
  <li><a href="/logout">Logout</a></li>
<li id="search-bar" data-hook>
      <form accept-charset="UTF-8" action="/products" class="navbar-form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>

<div class="form-group">
  <input class="form-control" id="keywords" name="keywords" placeholder="Search" type="search" />
</div>
<input class="btn btn-success" type="submit" value="Search" />
</form>
</li>
  </ul>
            <nav class="col-md-12"><div id="main-nav-bar" class="navbar">
    <ul class="nav nav-pills navbar-nav" data-hook>
<li id="home-link" data-hook><a href="/">Home</a></li>
      <li id="shop-link" data-hook><a href="/shop">Products</a></li>
      <li id="about-link" data-hook><a href="/about">About us</a></li>
      <li id="contact-link" data-hook><a href="/contact">Contact</a></li>
    </ul>
<ul class="nav navbar-nav navbar-right" data-hook>
<li id="link-to-cart" data-hook><a class="cart-info empty" href="/cart"><span class='glyphicon glyphicon-shopping-cart'></span> Cart: (Empty)</a></li>
    </ul>
<div id="locale-select" style="float: right; margin-right: 10px;" data-hook>
    <form accept-charset="UTF-8" action="/locale/set" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="mx8tcgWHDqyVslG5Fxvz6N03KRhtVtr9eXYyqDJpEhQ=" /></div><select class="form-control" data-href="/locale/set" id="locale" name="locale"><option selected="selected" value="en">English (US)</option>
<option value="nl-NL">Nederlands (NL)</option></select><noscript>
        <input name="commit" type="submit" value="Save changes" />
</noscript>
</form></div>
</div>
</nav>
        </div>
    </header>


</div>

  <div class="container row" style="margin: 0 auto;" data-hook>
    <.. MAIN CONTENT>
  </div>
</body>

Answer 1

添加课程或修改徽标的现有课程（text-center或col-md-4）。

写入：margin-bottom:-30px;。如果有效，请将30px值替换为适合的值。

Answer 2

由于您没有为我们提供使用CSS的游乐场，我假设做以下事情可以解决您的问题。
将position:absolute;提交给#logo。然后，使您的徽标图像尽可能大。并根据需要调整其他值。

Answer 3

您可以将徽标作为背景图片放在标题div上以获得此效果：http://codepen.io/pageaffairs/pen/geAsp

使用background-size，徽标将能够根据div的高度调整大小。唯一的缺点是徽标现在不能作为HTML中的链接提供，但有一些解决方法。

如何让菜单翻阅徽标？

3 个答案: