文章/答案/技术大牛

发布

社区首页 >问答首页 >如果在父div上使用"transform“，则Mix-blend-mode不起作用

问如果在父div上使用"transform“，则Mix-blend-mode不起作用
EN

Stack Overflow用户

提问于 2020-10-26 20:39:38

回答 1查看 179关注 0票数 3

我希望按钮上的文本是‘透明的’，这样你就可以看到下面的颜色。

已经快两个小时了，我疯狂地试图理解为什么它不能工作，但我注意到如果我从它的父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>

html

css

mix-blend-mode

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-26 21:58:26

这有点难以理解，因为你面临着两个复杂的问题，但像下面这样修改你的代码，它就会工作得很好：

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64537280

复制

相似问题

问如果在父div上使用"transform“，则Mix-blend-mode不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果在父div上使用"transform“，则Mix-blend-mode不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果在父div上使用"transform“，则Mix-blend-mode不起作用
EN