html - 如果我在父 div 上使用“转换”,则混合混合模式不起作用
问题描述
我希望按钮上的文字是“透明的”,所以你可以看到下面的颜色。
已经快 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>
推荐阅读
- obd-ii - 如何使用其物理地址与特定 ECU 通信
- node.js - 为什么 viber-bot(Nodejs) 在 Nginx 后面的 Docker 中运行时无法注册 webhook?
- javascript - 使用 fetch 的 POST 请求不起作用
- c# - Apache Ignite.NET 服务中的依赖注入
- android - 应用程序仅在连接到笔记本电脑的设备上运行
- arrays - 如何在bash中嵌套变量和循环子变量
- python - 在 Python 中为 OpenCV BoundryBox 设置自定义 RoI
- ruby-on-rails - 在 Rails 中控制公共文件响应代码
- c# - 与 ef 对话和可定制的 asp.net 类库
- google-app-engine - AppEngine 日志不接受上下文