21

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

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

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

4

5 回答 5

39

您必须为元素使用以下属性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，它只显示按钮中的文本。

于 2012-12-21T13:14:48.500 回答
11

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

button {
  visibility: hidden;
}

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

于 2012-12-21T13:05:21.653 回答
8 
button {
    background:transparent;
    border:none;
    outline:none;
    display:block;
    height:200px;
    width:200px;
    cursor:pointer;
}

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

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

于 2012-12-21T13:10:47.900 回答
3

HTML

<input type="button">

CSS

input[type=button]{
 background:transparent;
 border:0;
}
于 2012-12-21T13:12:31.870 回答
1

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

JSFiddle

于 2012-12-21T13:09:37.793 回答