React maskImage内联无法正常工作-相同的图像与backgroundImage一起工作

Posted 2023-01-08

我正在将内联样式应用于React中的div

如果我这样做

<div style= backgroundImage: `url($process.env.IMAGES/$ID.png)` >children</div>

它工作正常，但更改为

<div style= maskImage: `url($process.env.IMAGES/$ID.png)` >children</div>

样式甚至没有显示在代码检查器中。

可能出什么事了？谢谢

答案

由于掩码需要供应商前缀才能起作用，因此您需要手动添加它们：

const Mask = ( mask, children ) => (
  <div style=
    WebkitMaskImage: mask,
    maskImage: mask
  >
    children
  </div>
)

ReactDOM.render(
  <Mask mask="linear-gradient(black, transparent)">The big bad fox</Mask>,
  root
)

div 
  font-size: 2em;

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

以上是关于React maskImage内联无法正常工作-相同的图像与backgroundImage一起工作的主要内容，如果未能解决你的问题，请参考以下文章

jQGrid TreeGrid 的内联导航 addRow 方法无法正常工作

内联 Javascript 在 Rails 3.1 上重新渲染部分 ruby​​ 时无法正常工作

内联 fontFamily 在 React / Next.js 9 中不起作用

反应本机代码内联​​工作，但在导入时不起作用

Axios 在 React 组件中无法正常工作

React 视频元素无法正常工作