Отключить изображение над кнопкой

Question

У меня есть прозрачный PNG, который частично перекрывает кнопку.Кнопки становятся неактивными там, где изображение перекрывается.Есть ли способ отключить прозрачность, чтобы за ней можно было нажимать кнопку?Или есть какие-то другие хитрости, которые могут решить эту проблему?

Answer 1

IMG прозрачность не имеет никакого отношения к тому, можете ли вы нажимать кнопку или нет, поэтому «выключение прозрачности» ничего не сделает для вас.

Как указывает Mar_Garina, z-index определяет, какой элемент находится выше / ниже других элементов. Если вы хотите, чтобы эта кнопка всегда была сверху, дайте ей более высокий z-индекс. Тем не менее, обратите внимание, что это изображение будет перекрываться этой кнопкой, которая может быть не той, что вы хотите.

Также проверьте раздвижные двери с кнопками css , если вы ищете какой-нибудь пользовательский стиль кнопок

Answer 2

Я бы сказал, что в общем случае действительно нет решения проблемы.Область изображения всегда прямоугольная, независимо от того, являются ли ее пиксели прозрачными или нет.

Однако ответ @ Chief17 дал мне идею, которая может сработать, если ваша кнопка не использует стиль рендеринга ОС и не имеет фонового изображения.

Если это так, и общая ситуация с макетом позволяет это сделать, вы можете установить изображение, которое должно перекрывать кнопку, как фоновое изображение этой кнопки - в дополнение к изображению, плавающему вокругстраница.Используя background-position, вам нужно будет отрегулировать положение изображения таким образом, чтобы оно почти покинуло видимую область кнопки, покрывая только небольшую область перекрытия, которую кнопка не должна покрывать.

Это понятно, поставить?Он использует свойство кнопки background-image, чтобы имитировать перекрытие, в то время как на самом деле область перекрытия является фоновым изображением кнопки.

Это работает только тогда, когда вы действительно жестко контролируете положение кнопки и другие факторы.Это может не сработать для вас.

Answer 3

Не могли бы вы сделать это вместо этого:

<style type="text/css">
#button
{
background-image: url("[image location]");
width: [image width];
width: [image height];
}
</style>

И

<input type="button" value="button" id="button"/>

Это делает кнопку нажатой и делает изображение поверх.

Answer 4

Хотя я бы не рекомендовал это сделать, вы можете создать привязку в следующем стиле:

<a href="#" class="className">&nbsp;</a>

a.className {
  display: block;
  width: [width of button];
  height: [height of button];
  z-index: [above image];
}

Чтобы имитировать действие кнопки ....

Answer 5

Дайте кнопке более высокий z-индекс, чтобы она стала выше прозрачного изображения

document.getElementById('buttonId').style.zIndex = -5

Answer 6

дать кнопке более высокий z-индекс, может быть?