设置CSS形状的背景

Question

所以我一直试图为你可以在下面看到的导航栏的内圈设置一个背景图像,但我似乎无法让它工作.我尝试用css替换图像网址上的背景颜色,并进行适当的格式调整,但没有运气

我想要设置为背景的图像:

这是css:

            nav.navbar{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                border-bottom: 45px solid #252525;
            }
            ul.nav{
                position: relative;
                float: left;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            ul.nav:before, ul.nav:after{
                content: '';
                position: absolute;
                left: 50%
            }
            ul.nav:before{
                /*this controlls the outer circle of the ball*/
                margin-left: -63px; /*split the width in half and set to negative: eg: 170 : 2 = 85 px*/ 
                top: 40px; /*this is relative to your image, which I measured in photoshop, it will add space from the bottom to up*/
                width: 127px; /*this is the effective width */
                height: 127px; /*this is the effective height: both values have to be the same in order to make it round! */ 
                background: #252525;
                border-radius: 100%;
                -webkit-border-radius: 100%;
                -moz-border-radius: 100%;
            }

            ul.nav:after{
                /*this controlls the inner circle of the ball*/
                margin-left: -35px; /*split the width in half and set to negative: eg: 100 : 2 = 50 px*/ 
                top: 70px; /*this is relative to your image, which I measured in photoshop, it will add space from the bottom to up*/
                width: 70px; /*this is the effective width */
                height: 70px; /*this is the effective height: both values have to be the same in order to make it round! */
                background: #fff;
                background: url:('/images/nav.png') no-repeat 0 0;
                border-radius: 100%;
                -webkit-border-radius: 100%;
                -moz-border-radius: 100%;
            }

            ul.nav:after:hover{
                background:url(http://i.imgur.com/6HIGiyt.png);
            }


            ul.nav > li {
                float: left;
                width: 16.66666666666667%;
                border-left: 0px solid #e3e2e2;
                border-right: 0px solid #e3e2e2;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                list-style: none;
                margin: 0;
                padding: 0;
                text-align: center;
            }

            ul.nav > li a{
                text-decoration: none;
                color: #fff;
                background: #3193a5;
                display: block;
                height: 81px;
                font-size: 1.2em;
                line-height: 81px;
            }

            ul.nav > li a:hover, ul.nav > li a.current{
                background: #3193a5;
                color: #2a2626;
            }

            ul.nav > li:first-child{
                border-left: none;
            }

            ul.nav > li:last-child{
                border-right: none;
            }

            #gymleaders .col-lg-3 img{
                padding: 5px;
            }
            .fixb{
                position:fixed;
                bottom:0px;
            }

直播网站:http://planetpixelmon.com

小提琴:http://jsfiddle.net/MikeStardust/yq9Ge/

非常感谢你

Answer 1

在ul.nav中:在你有url:之后,删除它:

ul.nav:after{
   background: url('/images/nav.png') no-repeat 0 0;
}