Question

我的导航栏需要如下所示：

https://drive.google.com/file/d/0Bz4W2EsvOZtUNmpYd1o3VDkzQUk/view?usp=sharing

我有一张图像＆＃34;粗糙的纹理＆＃34;在导航栏的顶部，但我无法弄清楚如何将CSS添加到我的导航菜单栏，如上面的模型。

这是我的HTML（使用Wordpress菜单）：

    <div id="nav"> 

        <div class="container">
             <div class="row">

                <div class="span12"><?php mt_menu(); ?></div>

             </div>
        </div>       

    </div>

要在CSS中尝试这样的事情：

    #nav::before{
         content:url('rough-texture.png');
     }

但这似乎并没有给我我想要的东西。

这是我尝试添加到导航菜单顶部的图片：

https://drive.google.com/file/d/0Bz4W2EsvOZtUQmFSdXhtTE52Z00/view?usp=sharing

Answer 1

您可以在背景中使用两个图像，如下面的样式：

#nav {
  height: 50px;
  background-image: url(rough-texture.png), url(rough-texture02.png);
  background-repeat: no-repeat;
  background-position: 50% 0, 50% 100%;
}

第二张图片是底边。 Using CSS multiple backgrounds

将自定义图像边框添加到导航栏的顶部

1 个答案: