Прозрачная кнопка в HTML onclick?

Question

Помогите сделать именно в данном коде эту кнопку непрозрачной Не получается.

<script>
  var colorArray = [ "#f2f3f4" ]; // массив с цветами
  var i = 0; // итератор

  function changeColor() {
    var currentColor = colorArray[i];
    document.body.style.background = currentColor;
    localStorage.setItem('backgroundColor', currentColor);
    i++;
    if( i > colorArray.length - 1){
      i = 0;
    }
  }
  
  function setDefaultColor() {    
    document.body.style.removeProperty( 'background' );
    localStorage.removeItem('backgroundColor');
  }
</script>

<input type="button" onclick="changeColor()" value="Изменить фон">
<input type="button" onclick="setDefaultColor()" value="По умолчанию">

<script>
  window.onload = function() {
    document.body.style.background = localStorage.getItem('backgroundColor');
  };
</script>

Answer 1

Есть такое значение как transparent (прозрачный), он является цветом и применяется в таких свойствах как background-color, color и т.п.

body {
  background: lightblue;
}

button {
  background: transparent;
  border: 1px solid #000;
  padding: 5px;
}

<button>Прозрачный фон кнопки</button>

Answer 2

Простой пример: Клик

html:

<button id='hidden-btn' class="hidden-btn"></button>

css:

body {
  background: #cc77ee;
}
.hidden-btn {
  width:100px;
  height: 100px;
  border:none;
  background: transparent;  
  outline:none;
}

jQuery код:

$("#hidden-btn").on("click", function() {
  console.log("hidden-btn click...");
});

БЛОГ НА HUSL

Прозрачная кнопка в HTML onclick?

Ответы (2 шт):