HTML CSS 隐形按钮 [英] HTML CSS Invisible Button

问题描述

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

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!

推荐答案

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

you must use the following properties for a button element to make it transparent.

button {

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

带有可见文本的透明按钮

button {

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

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

and use absolute position to position the element.

你有一个 div 下的按钮元素.使用 position : div 上的相对值和 position : 按钮上的绝对值将其定位在 div 内.

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.

这是一个有效的 JSFiddle

这是一个更新的 JSFiddle，它只显示来自按钮的文本.

here is an updated JSFiddle that displays only text from the button.

这篇关于HTML CSS 隐形按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！