Question

我正在尝试在我的徽标下添加可点击的背景图片以链接到外部页面。问题是我添加代码的方式打破了Bootstraps菜单折叠选项，徽标没有按预期响应。我的网站链接是＆＃34; sirtcantalilar.com＆＃34;你可以检查一下。我的小提琴链接是http://jsfiddle.net/NJTH4/1/。当我调整页面徽标时，页面中的徽标开始向下。这是我添加我的徽标和bg图像的方式：

部首：

     <!--HEADER-->
       <header>
          <div class="container">
           <a href="/" class="logo"><img src="/images/sirtcantalilar-logo.png" alt="logo"></a>
        </div>
  </header>
     <!--CONTAINER--> /*BREAKS THIS MENU COLLAPSE
        <div class="container">
            <!--MENU-->
            <nav class="clearfix">
                <a href="" id="menu-button"><i class="fa fa-bars"></i></a>  
                <ul class="menu col-md-9 list-inline">
                    <li><a href="/">Anasayfa</a></li>
                </ul>
             </nav>

css规则：

header .container{
    background-image: url(../img/header.jpg);
    background-position:center;
    background-repeat:no-repeat;
    position: relative;
    height: 195px;
    max-width:100%;
    margin:0px auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.logo{
    position: relative;
    margin: 0 auto;
    display: inline-block;
    left:0px;
    top:25px;
}

在徽标下添加可点击背景图片的最佳方法是什么？感谢

编辑1：如果有人对此感兴趣，那么正确的代码可以按照我的意愿运行。

<header>
    <div class="container topperpart">
        <a href="/" title="Sirtcantalilar">
            <img src="http://cdn.sirtcantalilar.com/assets/img/sirtcantalilar-logo.png" class="toplogo img-responsive" alt="sirtcantalilar-logo" /></a>
        <a href="http://www.turkishairlines.com/tr-tr/wingoya-katil" target="_blank" title="Wingoya Katıl">
            <img src="http://cdn.sirtcantalilar.com/assets/img/banner-yeni.jpeg" class="topbanner" alt="wingo-katil" /></a>
    </div>
</header>

的CSS：

img.topbanner
{
    position:relative;
    z-index:1;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #3b6d80;
}

img.toplogo {
    z-index: 2;
    position:absolute;
    padding:3px 0px 0px 25px;
   max-width: 40%;  
}

Answer 1

你需要更清楚这个问题。

您是否尝试过为徽标提供z-index？

另外，我注意到div内部标题和导航也有相同的名称 - 容器。

您可以尝试使用其他名称并查看吗？

Answer 2

在<header>。
向左浮动第一个链接，向右浮动第二个链接
只能在广告图片周围点击土耳其航空公司链接 ...否则当用户真正想要您的主页时，很容易点击该链接。这会让我成为一个非常沮丧的用户。

在此示例中，粉红色块是您主页的第一个链接。点击该粉红色区域内的任何地方，您将被带到那里。蓝色区块是土耳其航空公司网站的链接。显然，颜色只是为了向您展示如何定位链接：）

已更新 - 请小提琴 - Fiddle Link!

HTML

<header>
    <a href="/" title="Sirtcantalilar" class="logoLink">
    <img src="http://cdn.sirtcantalilar.com/assets/img/sirtcantalilar-logo.png" class="toplogo" alt="sirtcantalilar-logo" />
    </a>

    <a id="otherLink" href="http://www.turkishairlines.com/tr-tr/wingoya-katil" target="_blank" title="Wingoya Katıl">

    </a>

</header>

CSS

header {
    width: 1190px;
    height: 195px;
    background: url("http://cdn.sirtcantalilar.com/assets/img/banner-yeni.jpeg") no-repeat;
}
img.toplogo {
    margin: 20px 0 0 20px;
}
a.logoLink {
    display: block;
    float: left;
    background: rgba(255, 0, 0, 0.5);
    width: 600px;
    height: 195px;
}
#otherLink {
    background: rgba(0, 0, 255, 0.5);
    display: block;
    float: right;
    width: 530px;
    height: 195px;
}

如何在徽标下添加可点击的背景图像

2 个答案: