HTML CSS Invisible Button

Question

您好我正在尝试制作一个隐形按钮(仍然可用且可点击),因为我的按钮样式嵌入在背景中,我不想将它们切片,并且从头开始执行.

所以我只想制作一个按钮,将它放在按钮所在的背景部分,并使其不可见,以便可以看到并单击背景按钮图像.

有什么建议？非常感谢你!

Answer 1

必须对button元素使用以下属性才能使其透明.

没有文本的透明按钮

button {

    background: transparent;
    border: none !important;
    font-size:0;
}

透明按钮与可见文本

button {

    background: transparent;
    border: none !important;
}?

并使用absolute position来定位元素.

例如

你有一个div下的按钮元素.使用position:div position上的relative和按钮上的absolute将它放在div中.

这是一个有效的JSFiddle

这是一个更新的JSFiddle,它只显示按钮中的文本.

Answer 2

您可以使用CSS来隐藏按钮.

button {
  visibility: hidden;
}

如果您<button>只是图像上的可点击区域,为什么还要打个按钮呢？您可以使用<map>元素.

Answer 3

button {
    background:transparent;
    border:none;
    outline:none;
    display:block;
    height:200px;
    width:200px;
    cursor:pointer;
}

在背景中给出相对于图像的高度和宽度.这将删除按钮的边框和颜色.您可能还需要将其置于绝对位置,以便您可以正确地将其放置在您需要的位置.我无法在不发布您的情况下进一步帮助您码

要使它真正隐形,你必须设置outline:none; 否则在某些浏览器中会出现蓝色轮廓,如果需要单击并设置尺寸,则必须设置display:block