Question

我有两个箭头，分别是按钮和与滚动条重叠的png图像。箭头除了这两个小方块以外，在我设置箭头样式时似乎不会移动/消失。它们似乎是箭头留下的空按钮。我需要小的正方形消失，并尝试使用border：none和background-color：透明，但是这些和其他css命令似乎仅适用于箭头，而不适用于底部的小框。救命！

按钮html和CSS：

    <button onclick="scrollMe('left')"> <img id="arrowL" src='../static/imj/arrowLeft.png' > </button>
      <button onclick="scrollMe('right')"> <img id="arrowR" src='../static/imj/arrowRight.png'> </button>

#arrowL{
    width: 7%;
    position: absolute;
    left: 9px;
    top: 812px;
    z-index: 3;
}
#arrowR{
    width: 7%;
    position: absolute;
    left: 657px;
    top: 812px;
    z-index: 3;
}'

The two boxes- whiteish grey below the people scrollbar

Answer 1

您的CSS样式仅适用于img元素，因为ids位于这些元素上

例如，要设置按钮的样式，可以使用类似.arrow-button的类

<button onclick="scrollMe('left')" class="arrow-button"> <img id="arrowL" src='../static/imj/arrowLeft.png' > </button>
<button onclick="scrollMe('right')" class="arrow-button"> <img id="arrowR" src='../static/imj/arrowRight.png'> </button>

//CSS
.arrow-button {
    background-color:transparent;
    border:none;
}

移除带有重叠的png按钮图像的按钮残留物

1 个答案: