Привет, я пытаюсь сделать невидимую кнопку (все еще функциональную и нажимаемую), потому что стили моих кнопок встроены в фон, и я не хочу их нарезать и делать все с самого начала.
Итак, я просто хочу сделать кнопку, поместить ее в ту часть фона, где должна быть кнопка, и сделать ее невидимой, чтобы изображение фоновой кнопки можно было увидеть и щелкнуть.
Какие-либо предложения? Большое спасибо!
вы должны использовать следующие свойства для элемента button, чтобы сделать его прозрачным.
button {
background: transparent;
border: none !important;
font-size:0;
}
button {
background: transparent;
border: none !important;
}
и используйте абсолютный position для позиционирования элемента.
у вас есть элемент кнопки под div. Используйте position: относительный для div и position: absolute для кнопки, чтобы расположить ее внутри div.
вот рабочий JSFiddle
вот обновленный JSFiddle, который отображает только текст с кнопки.
font-size:0; из приведенного выше кода. см. обновленный ответ.
- person Amyth; 21.12.2012
Вы можете использовать CSS, чтобы скрыть кнопку.
button {
visibility: hidden;
}
Если ваш <button> — это просто кликабельная область на изображении, зачем делать из нее кнопку? Вместо этого вы можете использовать элемент <map>.
button {
background:transparent;
border:none;
outline:none;
display:block;
height:200px;
width:200px;
cursor:pointer;
}
Укажите высоту и ширину по отношению к изображению на заднем плане. Это удаляет границы и цвет кнопки. Вам также может потребоваться позиционировать ее абсолютно, чтобы вы могли правильно разместить ее там, где вам нужно. Я не могу помочь вам, не опубликовав вас код
Чтобы сделать его действительно невидимым, вы должны установить outline:none; иначе в некоторых браузерах будет синий контур, и вам нужно установить display: заблокировать, если вам нужно щелкнуть по нему и установить для него размеры
HTML
<input type="button">
CSS
input[type=button]{
background:transparent;
border:0;
}
Используйте CSS background:transparent; для вашей кнопки/div.
