React maskImage 内联不起作用 - 与 backgroundImage 相同的图像

Question

我在 React

中将内联样式应用于 div

如果我这样做

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

它工作正常，但在更改为

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

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

有什么问题吗？谢谢

Answer 1

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

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 相同的图像

React maskImage inline not working - same image works as backgroundImage

css

mask

reactjs