在导航栏顶部添加自定义图像边框答案

【问题标题】：Adding custom image border to top of navigation bar在导航栏顶部添加自定义图像边框
【发布时间】：2017-07-12 03:06:27
【问题描述】：

我有一个导航栏需要看起来像这样：

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

我在导航栏顶部有一个“粗糙纹理”的图像，但我不知道如何使用 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

【问题讨论】：

标签： html css image pseudo-element navigationbar

【解决方案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

【讨论】：