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

debugcn 发表于 Dev

布兰德莫

我正在使用fullpageJS https://github.com/alvarotrigo/fullPage.js/来建立我的网站。我想更改箭头以显示自定义图像。我发现这个问题在前面的CSS上问过了：更改整页JS上的箭头？并且我尝试使用自己的arrow.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;
}

我的arrow.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;
}

春

使用如下代码：

.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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。