HTML CSS Invisible Button

Question

您好我正在尝试制作一个隐形按钮（功能和可点击），因为我的按钮样式嵌入在背景中，我不想将它们切片，并且从头开始做。

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

有什么建议吗？非常感谢你！

Answer 1

您必须使用button元素的以下属性才能使其透明。

无文字透明按钮

button {

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

带可见文字的透明按钮

button {

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

并使用绝对position来定位元素。

例如

你有一个div下的按钮元素。在div上使用position：relative;在按钮上使用position：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 如果您需要点击它并为其设置尺寸

Answer 4

<强> HTML

<input type="button">

<强> CSS

input[type=button]{
 background:transparent;
 border:0;
}

Answer 5

将CSS background:transparent;用于您的按钮/ div。

JSFiddle