CSS 将 Fullpage.js 中的箭头更改为自定义图像？

Question

我正在使用 fullpageJS https://github.com/alvarotrigo/fullPage.js/ 来制作我的网站。我想更改箭头以显示自定义图像。我发现这个问题之前在这里问过CSS: change arrows on fullpage JS?，我试图用我自己的 arrows.css 样式覆盖 jquery.fullPage.css 并且没有显示图像。我对编码比较陌生，所以我不确定覆盖原始 css 的最佳方法。

箭头的原始css：

.fp-controlArrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}

我的 arrows.css 样式代码：

.fp-controlArrow {
    position: absolute;
    width:146px !important;
    height:286px !important;
    z-index: 4;
    top: 50%;
}
.fp-controlArrow.fp-prev {
    background-image: url(images/leftnavbutton.png) !important;
    background-repeat: no-repeat;
    left: 0px;
    height:286px;
    width: 146px;
    z-index: 10; 
}
.fp-controlArrow.fp-next {
    background-image: url(images/rightnavbutton.png) !important;
    background-repeat: no-repeat;
    right: 0px;
    height:286px;
    width:146px;
    z-index: 10;
}

Answer 1

改用这样的代码：

.fp-controlArrow {
    position: absolute;
    width: 128px; /* This can be added here so you don't have to set a width and height 2 times for each arrow, this will create one width for both arrows */
    height: 128px; /* This does the same as above */
    margin-top:-64px; /* This value must always be half of the height - This does the same as above */
    z-index: 4;
    top: 50%;
    cursor: pointer;
}

.fp-controlArrow.fp-prev {
    left:0;
    background: url(images/rightnavbutton.png) no-repeat;
}
.fp-controlArrow.fp-next {
    right:0;
    background: url(images/rightnavbutton.png) no-repeat;
}