CSS 将背景图片合并为一个

标签 css html

我正在尝试将这些合并到单元格中，以便它只使用一个背景图像一直在尝试一整天但没有成功。如果有人可以提供帮助，我将不胜感激，

根域是 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>

最佳答案

提取下面的标题并将其放入导航栏的最后一个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>

-----此处的片段-------------------- 

<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>

关于CSS 将背景图片合并为一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34599878/

上一篇：html - 导航栏和 iframe 之间的空白

下一篇：html - 为什么不能覆盖这个通用的CSS样式呢？

相关文章：

Javascript/Jquery 获取图像实际 z-index

javascript - 如何检索 css3 旋转中的 Angular ？

javascript - 维基百科搜索栏错误: "Can' t bind to *ngFor"(Angular2/HTML/Javascript)

html - 如何在支持所有视口(viewport)的情况下使用 css 将 html 表单定位在图像的特定部分？

html - div 中的元素之间的相等分隔

javascript - 纯 Javascript 在点击时添加样式

html - 如何在同一列中显示两张图片？

javascript - PHP/JS/AJAX/HTML : Dynamically creating a webpages

javascript - 从输入表单字段创建 JavaScript 对象数组

html - 如何向用户显示在网页中选择了菜单栏的哪个选项

©2024 IT工具网  联系我们