Hallo, ich versuche, eine unsichtbare Schaltfläche zu erstellen (immer noch funktionsfähig und anklickbar), da meine Schaltflächenstile im Hintergrund eingebettet sind und ich sie nicht schneiden möchte und alles von Anfang an machen möchte.
Ich möchte also nur eine Schaltfläche erstellen, sie an der Stelle des Hintergrunds platzieren, an der sich die Schaltfläche befinden soll, und sie unsichtbar machen, damit das Bild der Hintergrundschaltfläche angezeigt und angeklickt werden kann.
Irgendwelche Vorschläge? Vielen Dank!
sie müssen die folgenden Eigenschaften für ein button
-Element verwenden, um es transparent zu machen.
button {
background: transparent;
border: none !important;
font-size:0;
}
button {
background: transparent;
border: none !important;
}
und verwenden Sie absolute position
, um das Element zu positionieren.
sie haben das Button-Element unter einem div. Verwenden Sie position
: relativ für div und position
: absolut für die Schaltfläche, um sie innerhalb des div zu positionieren.
hier ist eine funktionierende JSFiddle
hier ist ein aktualisiertes JSFiddle , das nur Text von der Schaltfläche anzeigt.
Sie können CSS verwenden, um die Schaltfläche auszublenden.
button {
visibility: hidden;
}
Wenn es sich bei Ihrem <button>
nur um einen anklickbaren Bereich im Bild handelt, warum sollten Sie sich dann eine Schaltfläche daraus machen? Sie können stattdessen <map>
element verwenden.
button {
background:transparent;
border:none;
outline:none;
display:block;
height:200px;
width:200px;
cursor:pointer;
}
Geben Sie die Höhe und Breite in Bezug auf das Bild im Hintergrund an. Dadurch werden die Ränder und die Farbe einer Schaltfläche entfernt. Möglicherweise müssen Sie sie auch absolut positionieren, damit Sie sie richtig an der richtigen Stelle platzieren können Code
Um es wirklich unsichtbar zu machen, müssen Sieoutline setzen: none;Andernfalls wäre in einigen Browsern ein blauer Umriss vorhanden, und Sie müssendisplay: blocksetzen, wenn Sie darauf klicken und die entsprechenden Abmessungen festlegen müssen
HTML
<input type="button">
CSS
input[type=button]{
background:transparent;
border:0;
}
Verwenden Sie CSS background:transparent;
für Ihren Button/Div.