HTML CSS 隐形按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13990629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML CSS Invisible Button
提问by user1880779
Hello I am trying to make an invisible button (still functional and clickable), because my buttons styles are embedded in the background and I don't want to slice them, and do it all from beginning.
您好，我正在尝试制作一个不可见的按钮（仍然有效且可点击），因为我的按钮样式嵌入在背景中，我不想将它们切片，并从头开始做这一切。
So I just want to make a button, put it on the part of the background where the button should be and make it invisible so the background button image can be seen and clicked.
所以我只想制作一个按钮，把它放在按钮应该在的背景部分并使它不可见，这样背景按钮图像就可以被看到和点击。
Any suggestions? Thank you very much!
有什么建议？非常感谢！
回答by Amyth
you must use the following properties for a buttonelement to make it transparent.
您必须对button元素使用以下属性才能使其透明。
Transparent Button With No Text
没有文字的透明按钮
button {
background: transparent;
border: none !important;
font-size:0;
}
Transparent Button With Visible Text
带有可见文本的透明按钮
button {
background: transparent;
border: none !important;
}?
and use absolute positionto position the element.
并使用绝对position来定位元素。
For Example
例如
you have the button element under a div. Use position: relative on div and position: absolute on the button to position it within the div.
你有一个 div 下的按钮元素。position在 div 上使用:relative 和position在按钮上使用: absolute 将其定位在 div 内。
here is a working JSFiddle
这是一个有效的JSFiddle
here is an updated JSFiddlethat displays only text from the button.
这是一个更新的JSFiddle，它只显示来自按钮的文本。
回答by xiaoyi
回答by Mevin Babu
button {
background:transparent;
border:none;
outline:none;
display:block;
height:200px;
width:200px;
cursor:pointer;
}
Give the height and width with respect to the image in the background.This removes the borders and color of a button.You might also need to position it absolute so you can correctly place it where you need.I cant help you further without posting you code
为背景中的图像提供高度和宽度。这会删除按钮的边框和颜色。您可能还需要将其绝对定位，以便您可以将其正确放置在您需要的位置。如果不发布您，我无法进一步帮助您代码
To make it truly invisible you have to set outline:none;otherwise there would be a blue outline in some browsers and you have to set display:blockif you need to click it and set dimensions to it
要使其真正不可见，您必须设置outline:none; 否则在某些浏览器中会出现蓝色轮廓，如果您需要单击它并为其设置尺寸，则必须设置display:block
回答by Muhammad Usman
HTML
HTML
<input type="button">
CSS
CSS
input[type=button]{
background:transparent;
border:0;
}
