【问题标题】：HTML CSS Invisible ButtonHTML CSS 不可见按钮
【发布时间】：2012-12-09 01:30:16
【问题描述】：

您好，我正在尝试制作一个不可见的按钮（仍然有效且可点击），因为我的按钮样式嵌入在背景中，我不想对它们进行切片，而是从头开始。

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

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

【问题讨论】：

【解决方案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，它只显示按钮中的文本。

【讨论】：

【解决方案2】：

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

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

要使其真正不可见，您必须设置 outline:none; 否则在某些浏览器中会出现蓝色轮廓，您必须设置 display:block 如果您需要单击它并为其设置尺寸

【讨论】：

【解决方案3】：

HTML

<input type="button">

CSS

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

【讨论】：

【解决方案4】：

在您的按钮/div 中使用 CSS background:transparent;。

【讨论】：

【解决方案5】：

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

button {
  visibility: hidden;
}

如果您的<button> 只是图像上的一个可点击区域，为什么还要将其设为按钮？您可以改用<map> 元素。

【讨论】：