Question

我正在尝试将它们合并到单元格，以便它只使用一个背景图像，一直在尝试，但没有成功。有人可以提供帮助，我会非常感激，

根域是http://amalgamite.com，所以你可以看到我在谈论这两张图片。

<!DOCTYPE html>

<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="ltr" lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="ltr" lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="ltr" lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>BBQ Grills & Supply</title>
<base href="http://amalgamite.com/" />
<meta name="description" content="BBQ Grills & Supply" />
<meta name="keywords" content= "BBQ Grills & Supply" />
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/Bearing Depot/stylesheet/stylesheet.css" rel="stylesheet">
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<link href="http://amalgamite.com/" rel="canonical" />
</head>

<body oncontextmenu="return false;" class="common-home"> 
 <nav id="top">
  <div class="container"  style="background: url(http://amalgamite.com/pics/Header-Cell-BG.png);">
    <div class="row">

      <div id="logo">
                    <a href="http://amalgamite.com/index.php?route=common/home"><div class="HeaderTextLarge">BBQ Grills & Supply</div>
          <br /><div class="HeaderTextSmall">800 Lincoln Blvd. Plainfield PA</div></a>          

      <div id="top-links" class="nav pull-right" style="clear:bolth;">
       <ul class="list-inline">

        <li><a href="http://amalgamite.com/index.php?route=information/contact"><i class="fa fa-phone fa-Top"></i></a> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">732.563.2225</span></li>

        <li class="dropdown"><a href="http://amalgamite.com/index.php?route=account/account" title="My Account" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-user fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">My Account</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right HeaderTextXSmall">
                        <li><a href="http://amalgamite.com/index.php?route=account/register">Register</a></li>
            <li><a href="http://amalgamite.com/index.php?route=account/login">Login</a></li>
                      </ul>
        </li>

        <li><a href="http://amalgamite.com/index.php?route=checkout/cart" title="Shopping Cart"><i class="fa fa-shopping-cart fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Shopping Cart</span></a></li>
        <li><a href="http://amalgamite.com/index.php?route=checkout/checkout" title="Checkout"><i class="fa fa-share fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Checkout</span></a></li>
      </ul>  </div>
      </div>
    </div>
  </div>
</nav>

<header>
  <div class="container"  style="background: url(http://amalgamite.com/pics/Header-Cell-BG.png);">
    <div class="row">
      <div class="col-sm-4">&nbsp;</div>
      <div class="col-sm-5"><div id="search" class="input-group">
  <input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
  </span>
</div></div>
      <div class="col-sm-3"><div id="cart" class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
  <ul class="dropdown-menu pull-right">
        <li>
      <p class="text-center">Your shopping cart is empty!</p>
    </li>
      </ul>
</div>
</div>
    </div>
  </div>
</header>

Answer 1

提取下面的标题并将其放入导航栏中的最后一个div并将背景设置为透明

  <header>
  <div class="container"  style="background:transparent">
    <div class="row">
      <div class="col-sm-4">&nbsp;</div>
      <div class="col-sm-5"><div id="search" class="input-group">
  <input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
  </span>
</div></div>
      <div class="col-sm-3"><div id="cart" class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
  <ul class="dropdown-menu pull-right">
        <li>
      <p class="text-center">Your shopping cart is empty!</p>
    </li>
      </ul>
</div>
</div>
    </div>
  </div>
</header>

------ SNIPPET HERE --------------------

<title>Bearing Depot &amp; Supply</title>
<base href="http://amalgamite.com/" />
<meta name="description" content="BBQ Grills & Supply" />
<meta name="keywords" content= "BBQ Grills & Supply" />
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/Bearing Depot/stylesheet/stylesheet.css" rel="stylesheet">
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<link href="http://amalgamite.com/" rel="canonical" />

<body oncontextmenu="return false;" class="common-home"> 
 <nav id="top">
  <div class="container"  style="background: url(http://amalgamite.com/pics/Header-Cell-BG.png);">
    <div class="row">
            
      <div id="logo">
                    <a href="http://amalgamite.com/index.php?route=common/home"><div class="HeaderTextLarge">BBQ Grills & Supply</div>
          <br /><div class="HeaderTextSmall">800 Lincoln Blvd. Plainfield PA</div></a>          
                              
      <div id="top-links" class="nav pull-right" style="clear:bolth;">
       <ul class="list-inline">
        
        <li><a href="http://amalgamite.com/index.php?route=information/contact"><i class="fa fa-phone fa-Top"></i></a> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">732.563.2225</span></li>
        
        <li class="dropdown"><a href="http://amalgamite.com/index.php?route=account/account" title="My Account" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-user fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">My Account</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right HeaderTextXSmall">
                        <li><a href="http://amalgamite.com/index.php?route=account/register">Register</a></li>
            <li><a href="http://amalgamite.com/index.php?route=account/login">Login</a></li>
                      </ul>
        </li>

        <li><a href="http://amalgamite.com/index.php?route=checkout/cart" title="Shopping Cart"><i class="fa fa-shopping-cart fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Shopping Cart</span></a></li>
        <li><a href="http://amalgamite.com/index.php?route=checkout/checkout" title="Checkout"><i class="fa fa-share fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Checkout</span></a></li>
      </ul>  </div>
      </div>
    </div>
      <header>
  <div class="container"  style="background:transparent">
    <div class="row">
      <div class="col-sm-4">&nbsp;</div>
      <div class="col-sm-5"><div id="search" class="input-group">
  <input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
  </span>
</div></div>
      <div class="col-sm-3"><div id="cart" class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
  <ul class="dropdown-menu pull-right">
        <li>
      <p class="text-center">Your shopping cart is empty!</p>
    </li>
      </ul>
</div>
</div>
    </div>
  </div>
</header>
  </div>

</nav>

Answer 2

您可能需要使用图像本身，让它们更符合您的需求。

然而，编码方面，您可以使用其中一个图像而不是两个图像。将此图片应用于background标记的<body>属性，或新的<div>，其中包含您希望拥有背景图片的所有元素。

例如，仅将背景图片放在<body>元素上：

从background，.container和#top .container（以及其他任何需要的地方）删除所有#top属性。
将background: url(http://amalgamite.com/pics/Header-Cell-BG.png);添加到您的<body>。

这应该有助于清理外观和感觉。

免责声明：实施100％由您决定，发挥创意！

Answer 3

试试这个：

<!DOCTYPE html>

<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="ltr" lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="ltr" lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="ltr" lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>BBQ Grills & Supply</title>
<base href="http://amalgamite.com/" />
<meta name="description" content="BBQ Grills & Supply" />
<meta name="keywords" content= "BBQ Grills & Supply" />
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/Bearing Depot/stylesheet/stylesheet.css" rel="stylesheet">
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<link href="http://amalgamite.com/" rel="canonical" />
</head>

<body oncontextmenu="return false;" class="common-home"> 


<header style="background: url(http://amalgamite.com/pics/Header-Cell-BG.png);">
<nav id="top">
  <div class="container">
    <div class="row">

      <div id="logo">
                    <a href="http://amalgamite.com/index.php?route=common/home"><div class="HeaderTextLarge">BBQ Grills & Supply</div>
          <br /><div class="HeaderTextSmall">800 Lincoln Blvd. Plainfield PA</div></a>          

      <div id="top-links" class="nav pull-right" style="clear:bolth;">
       <ul class="list-inline">

        <li><a href="http://amalgamite.com/index.php?route=information/contact"><i class="fa fa-phone fa-Top"></i></a> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">732.563.2225</span></li>

        <li class="dropdown"><a href="http://amalgamite.com/index.php?route=account/account" title="My Account" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-user fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">My Account</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right HeaderTextXSmall">
                        <li><a href="http://amalgamite.com/index.php?route=account/register">Register</a></li>
            <li><a href="http://amalgamite.com/index.php?route=account/login">Login</a></li>
                      </ul>
        </li>

        <li><a href="http://amalgamite.com/index.php?route=checkout/cart" title="Shopping Cart"><i class="fa fa-shopping-cart fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Shopping Cart</span></a></li>
        <li><a href="http://amalgamite.com/index.php?route=checkout/checkout" title="Checkout"><i class="fa fa-share fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Checkout</span></a></li>
      </ul>  </div>
      </div>
    </div>
  </div>
</nav>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">&nbsp;</div>
      <div class="col-sm-5"><div id="search" class="input-group">
  <input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
  </span>
</div></div>
      <div class="col-sm-3"><div id="cart" class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
  <ul class="dropdown-menu pull-right">
        <li>
      <p class="text-center">Your shopping cart is empty!</p>
    </li>
      </ul>
</div>
</div>
    </div>
  </div>
</header>
<div id="content">
<h2> your content here</h2>
</div>
</body>

这是你想要实现的目标吗？另外，你应该把你的风格放在.css文件中。

CSS将背景图像合并为一个

3 个答案: