在HTML/CSS/JavaScript中应用单个图像来覆盖一组键

dxxyhpgq 于 2023-08-08 发布在 Java

关注(0)|答案(1)|浏览(84)

我正在做一个虚拟键盘的项目，我试图用一个背景图片来覆盖整个按键组，而不影响布局。我已经尝试了一些方法，但我遇到了CSS定位和覆盖的困难。
当我在一个元素中 Package 一组键以应用背景图像时，键布局会被打乱。关键点不再正确对齐，并且它们之间的间距发生了变化。

document.addEventListener("DOMContentLoaded", function() {
  const g1Keys = document.querySelectorAll(".key.g1");

  g1Keys.forEach(key => {
    key.addEventListener("mouseenter", function() {
      g1Keys.forEach(g1Key => {
        g1Key.classList.add("hovered");
      });
    });

    key.addEventListener("mouseleave", function() {
      g1Keys.forEach(g1Key => {
        g1Key.classList.remove("hovered");
      });
    });
  });
});

//G2
document.addEventListener("DOMContentLoaded", function() {
  const g1Keys = document.querySelectorAll(".key.g2");

  g1Keys.forEach(key => {
    key.addEventListener("mouseenter", function() {
      g1Keys.forEach(g1Key => {
        g1Key.classList.add("hovered");
      });
    });

    key.addEventListener("mouseleave", function() {
      g1Keys.forEach(g1Key => {
        g1Key.classList.remove("hovered");
      });
    });
  });
});

//G3
document.addEventListener("DOMContentLoaded", function() {
  const g1Keys = document.querySelectorAll(".key.g3");

  g1Keys.forEach(key => {
    key.addEventListener("mouseenter", function() {
      g1Keys.forEach(g1Key => {
        g1Key.classList.add("hovered");
      });
    });

    key.addEventListener("mouseleave", function() {
      g1Keys.forEach(g1Key => {
        g1Key.classList.remove("hovered");
      });
    });
  });
});

//G4
document.addEventListener("DOMContentLoaded", function() {
  const g1Keys = document.querySelectorAll(".key.g4");

  g1Keys.forEach(key => {
    key.addEventListener("mouseenter", function() {
      g1Keys.forEach(g1Key => {
        g1Key.classList.add("hovered");
      });
    });

    key.addEventListener("mouseleave", function() {
      g1Keys.forEach(g1Key => {
        g1Key.classList.remove("hovered");
      });
    });
  });
});

//G5
document.addEventListener("DOMContentLoaded", function() {
  const g1Keys = document.querySelectorAll(".key.g5");

  g1Keys.forEach(key => {
    key.addEventListener("mouseenter", function() {
      g1Keys.forEach(g1Key => {
        g1Key.classList.add("hovered");
      });
    });

    key.addEventListener("mouseleave", function() {
      g1Keys.forEach(g1Key => {
        g1Key.classList.remove("hovered");
      });
    });
  });
});

document.addEventListener("DOMContentLoaded", function() {
  const colorInputs = document.querySelectorAll(".color-input");

  colorInputs.forEach(input => {
    input.addEventListener("change", function() {
      const groupClass = this.classList[1]; // Assuming the second class is the group class
      const keys = document.querySelectorAll(`.key.${groupClass}`);

      keys.forEach(key => {
        key.style.backgroundColor = this.value;
      });
    });
  });
});


document.addEventListener("DOMContentLoaded", function() {
  const imageInputs = document.querySelectorAll(".image-input");

  imageInputs.forEach(input => {
    input.addEventListener("change", function() {
      const groupClass = this.classList[1]; // Assuming the second class is the group class
      const keys = document.querySelectorAll(`.key.${groupClass}`);
      const file = this.files[0];

      if (file) {
        const imageUrl = URL.createObjectURL(file);

        keys.forEach(key => {
          key.style.backgroundImage = `url('${imageUrl}')`;
        });
      }
    });
  });
});

body * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.keyboard-base {
  max-width: 1085px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(197, 197, 197);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(30, 30px);
  grid-template-rows: repeat(5, 60px);
  grid-gap: 5px;
}

.color-input {
  width: 100%;
  border: none;
  border-radius: 5px;
  background-color: rgb(243, 243, 243);
  font-size: 20px;
  text-align: center;
}

.key.g1:hover,
.key.g1.hovered {
  border: 1px solid #eeeeee;
}

.key.g2:hover,
.key.g2.hovered {
  border: 1px solid #eeeeee;
}

.key.g3:hover,
.key.g3.hovered {
  border: 1px solid #eeeeee;
}

.key.g4:hover,
.key.g4.hovered {
  border: 1px solid #eeeeee;
}

.key.g5:hover,
.key.g5.hovered {
  border: 1px solid #eeeeee;
}

.key {
  background-color: rgb(243, 243, 243);
  border: 2px solid black;
  border-radius: 5px;
  grid-column: span 2;
  font-size: 20px;
  text-align: center;
  padding-top: 17px;
  background-size: cover;
  background-repeat: no-repeat;
}

.key:hover {
  border: 1px solid #eeeeee;
}

.delete {
  grid-column: span 4;
}

.tab {
  grid-column: span 3;
}

.backslash {
  grid-column: span 3;
}

.capslock {
  grid-column: span 4;
}

.return {
  grid-column: span 4;
}

.leftshift {
  grid-column: span 5;
}

.rightshift {
  grid-column: span 5;
}

.leftctrl {
  grid-column: span 3;
}

.command {
  grid-column: span 3;
  font-size: 14px;
}

.space {
  grid-column: span 13;
}

<div class="keyboard-base">
  <div class="key g1">~</div>
  <div class="key g1">1</div>
  <div class="key g1">2</div>
  <div class="key g1">3</div>
  <div class="key g1">4</div>
  <div class="key g1">5</div>
  <div class="key g1">6</div>
  <div class="key g1">7</div>
  <div class="key g1">8</div>
  <div class="key g1">9</div>
  <div class="key g1">0</div>
  <div class="key g1">-</div>
  <div class="key g1">+</div>
  <div class="key delete g5">Backspace</div>
  <div class="key tab g5">Tab</div>
  <div class="key g3">Q</div>
  <div class="key g2">w</div>
  <div class="key g3">E</div>
  <div class="key g3">R</div>
  <div class="key g3">T</div>
  <div class="key g3">Y</div>
  <div class="key g3">U</div>
  <div class="key g3">I</div>
  <div class="key g3">O</div>
  <div class="key g3">P</div>
  <div class="key g3">[</div>
  <div class="key g3">]</div>
  <div class="key backslash g5">\</div>
  <div class="key capslock g5">CapsLock</div>
  <div class="key g2">A</div>
  <div class="key g2">S</div>
  <div class="key g2">D</div>
  <div class="key g3">F</div>
  <div class="key g3">G</div>
  <div class="key g3">H</div>
  <div class="key g3">J</div>
  <div class="key g3">K</div>
  <div class="key g3">L</div>
  <div class="key g3">;</div>
  <div class="key g3">'</div>
  <div class="key return g4">Enter</div>
  <div class="key leftshift g5">Shift</div>
  <div class="key g3">Z</div>
  <div class="key g3">X</div>
  <div class="key g3">C</div>
  <div class="key g3">V</div>
  <div class="key g3">B</div>
  <div class="key g3">N</div>
  <div class="key g3">M</div>
  <div class="key g3">,</div>
  <div class="key g3">.</div>
  <div class="key g3">/</div>
  <div class="key rightshift g5">Shift</div>
  <div class="key leftctrl g5">Ctrl</div>
  <div class="key g5">Alt</div>
  <div class="key command g5">Command</div>
  <div class="key space g4">Space</div>
  <div class="key command g5">command</div>
  <div class="key g5">Alt</div>
  <div class="key g5">Ctrl</div>
  <div class="key g5">Fn</div>

  <input type="color" class="color-input g1">
  <input type="color" class="color-input g2">
  <input type="color" class="color-input g3">
  <input type="color" class="color-input g4">
  <input type="color" class="color-input g5">

  <input type="file" class="image-input g1">
  <input type="file" class="image-input g2">
  <input type="file" class="image-input g3">
  <input type="file" class="image-input g4">
  <input type="file" class="image-input g5">
</div>

我尝试过的：
我尝试使用元素来分组键并应用背景图像，但这导致了布局问题。关键点未按预期对齐，并且关键点之间的间距发生了变化。
预期结果：
我正在寻找一个解决方案，让我应用一个单一的背景图像，以涵盖整个一组键，而不影响布局。关键点应保持其原始位置和间距。
问题：
有没有一种替代的方法来应用背景图像，而不会破坏按键布局？是否有任何特定的CSS技术或属性，我应该考虑实现所需的图像覆盖，而不影响布局？
我很感激任何关于如何解决这个问题并在保持原有按键布局的同时达到预期效果的建议或意见。

css

来源：https://stackoverflow.com/questions/76845860/applying-a-single-image-to-cover-a-group-of-keys-in-html-css-javascript

1条答案

按热度按时间

7bsow1i61#

试试这个：

CSS定位

.key {
    background-color: rgb(243, 243, 243);
    border: 2px solid black;
    border-radius: 5px;
    grid-column: span 2;
    font-size: 20px;
    text-align: center;
    padding-top: 17px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative; /* Add position relative to enable overlay */
}

/* Apply background image on hover */
.key:hover {
    border: 1px solid #eeeeee;
    background-image: url('your-image-url.jpg'); /* Specify the background image URL */
    z-index: 1; /* Ensure the image is on top */
}

字符串
图片URL：确保将'your-image-url.jpg'替换为背景图片的实际URL。

赞(0）回复(0）举报 2023-08-08

我来回答

在HTML/CSS/JavaScript中应用单个图像来覆盖一组键

1条答案

相关问题

热门标签

最新问答