0

为什么在 React 内联样式中background覆盖？backgroundColor

在此示例中，未设置绿色背景颜色，因此包含透明度的背景渐变在透明部分逐渐变为白色，而不是绿色。

我怎样才能阻止这种情况发生，这样透明度才有用？

class App extends React.Component {
  render() {
    return (
      <div style={{backgroundColor:"green", background: "radial-gradient(100% 100% at 0px 0px, rgb(230, 100, 101), transparent)"}}>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
div {
  width: 200px;
  height: 200px;
}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果我只是在外部设置 css，它就可以工作，但我需要它以反应内联样式工作，因为 css 将是动态的。

4

2 回答 2

1

当您使用针对同一属性的多个 css 规则时，最后一个将覆盖所有以前的规则。这就是为什么径向渐变是唯一可见的规则。幸运的是，可以使用多个 css 背景，因此您不能通过链接所有背景定义来组合不同的背景，如下所示：

background: background1, background2, ..., backgroundn

您的示例已修改为具有两种背景，如下面的代码段所示：

class App extends React.Component {
  render() {
    return (
      <div style={{background: "radial-gradient(100% 100% at 0px 0px, rgb(230, 100, 101), transparent), green"}}>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
div {
  width: 200px;
  height: 200px;
}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

于 2019-03-10T17:16:21.617 回答
1

在 中指定green渐变后的属性background，并完全摆脱backgroundColor：

class App extends React.Component {
  render() {
    return (
      <div style={{background: "radial-gradient(100% 100% at 0px 0px, rgb(230, 100, 101), green)"}}>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
div {
  width: 200px;
  height: 200px;
}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

于 2019-03-10T17:20:07.103 回答