我希望按钮上的文本是"透明的"，这样您就可以看到下面的颜色。
已经快2个小时了，我疯狂地试图理解为什么它不起作用，但我注意到，如果我从它的父div中删除transform: translate(-50%, -50%);，它就起作用了。为什么？
我做错了什么？
let button = document.querySelector('.button')
let body = document.querySelector('.body')
button.addEventListener('click', ()=> {
let colorOne = parseInt(Math.random() * 255)
let colorTwo = parseInt(Math.random() * 255)
let colorThree = parseInt(Math.random() * 255)
body.style.background = 'rgb(' + colorOne + ', ' + colorTwo + ', ' + colorThree
+ ')'
document.querySelector('.color').innerText = 'rgb (' + colorOne + ', ' + colorTwo + ', ' + colorThree
+ ')'}).button {
font-family: 'Poppins', sans-serif;
border-radius: .5em;
padding: .3em .7em;
font-size: 1.1em;
position: relative;
background: white;
mix-blend-mode: screen;
}
.color {
font-family: 'Poppins', sans-serif;
color: white;
text-shadow: 1px 1px 3px black;
letter-spacing: 1px;
}
.container {
text-align: center;
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
}<body class="body">
<div class="container">
<h3 class="button">Generate Colour</h3>
<p class="color"></p>
</div>
<script src="main.js"></script>
</body>这有点难以理解，因为您面临两个复杂的问题，但像下面这样更改代码，它会正常工作：
let button = document.querySelector('.button')
let body = document.querySelector('.body')
button.addEventListener('click', ()=> {
let colorOne = parseInt(Math.random() * 255)
let colorTwo = parseInt(Math.random() * 255)
let colorThree = parseInt(Math.random() * 255)
body.style.background = 'rgb(' + colorOne + ', ' + colorTwo + ', ' + colorThree
+ ')'
document.querySelector('.color').innerText = 'rgb (' + colorOne + ', ' + colorTwo + ', ' + colorThree
+ ')'}).button {
font-family: 'Poppins', sans-serif;
border-radius: .5em;
padding: .3em .7em;
font-size: 1.1em;
position: relative;
background: white;
}
.color {
font-family: 'Poppins', sans-serif;
color: white;
text-shadow: 1px 1px 3px black;
letter-spacing: 1px;
}
.container {
text-align: center;
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
mix-blend-mode: screen; /* the bleding on the parent element */
}
.body {
min-height:100vh; /* full height since there is no in-flow content */
margin:0;
position:relative; /* the container need to be relative to body */
}
html {
background:#fff; /* to stop background propagation from body to html */
}<body class="body">
<div class="container">
<h3 class="button">Generate Colour</h3>
<p class="color"></p>
</div>
<script src="main.js"></script>
</body>