CSS 将 Fullpage.js 中的箭头更改为自定义图像?
CSS Change the Arrows in Fullpage.js to custom images?
我正在使用 fullpageJS https://github.com/alvarotrigo/fullPage.js/ to make my website. I wanted to change the arrows to display custom images instead. I found this question asked earlier here 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;
}
改为使用如下代码:
.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;
}
我正在使用 fullpageJS https://github.com/alvarotrigo/fullPage.js/ to make my website. I wanted to change the arrows to display custom images instead. I found this question asked earlier here 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;
}
改为使用如下代码:
.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;
}