我正在做一个虚拟键盘的项目,我试图用一个背景图片来覆盖整个按键组,而不影响布局。我已经尝试了一些方法,但我遇到了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技术或属性,我应该考虑实现所需的图像覆盖,而不影响布局?
我很感激任何关于如何解决这个问题并在保持原有按键布局的同时达到预期效果的建议或意见。
1条答案
按热度按时间7bsow1i61#
试试这个:
字符串
图片URL:确保将'your-image-url.jpg'替换为背景图片的实际URL。