我希望按钮上的文字是“透明的”，这样您就可以看到下面的颜色。
已经将近 2 个小时了，我疯狂地试图理解为什么它不起作用，但我注意到如果我删除 transform: translate(-50%, -50%);从它的父 div 开始工作。为什么？
我做错了什么？
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>关于html - 如果我在父 div 上使用 "transform"，则 Mix-blend-mode 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64537280/