反应背景中的内联样式：线性渐变

Question

我正在尝试使用background具有 alinear-gradient但未应用该样式的内联样式。

这是我的代码：

 <div className="card" style={{background:"linear-gradient(to bottom, Transparente 0%,Transparente 50%,red 50%,red 100%)"}}/>

当我为我的背景添加“简单”颜色时，意思是 no linear-gradient，它运行良好。

<div className="card" style={{background:"red"}}/>

提前致谢。

Answer 1

我认为您没有正确编写代码。请参阅本网站示例的示例

<div className="card" style={{background: "linear-gradient(#e66465, #9198e5);" }}>sada</div>

Answer 2

我有类似的东西：

<div style={{background: `linear-gradient(190deg, #fa7c30 30%, rgba(0, 0, 0, 0)30%), url(${somePic});`}}/>

这不起作用，;因为linear-gradient. 我删除了它并且它起作用了。

Answer 3

使用此代码：

backgroundImage: "linear-gradient(to right, #4880EC, #019CAD)"

Answer 4

像这样与变量一起使用

const color1 = "#343336";
const color2 = "#B408A4";
style={{background: `linear-gradient(to bottom,  ${color1} 0%,${color2} 100%)`}}

Answer 5

所以，我看到你的帖子是因为我面临着同样的问题，但我找到了解决方案。

<button style={{ backgroundImage: `linear-gradient(to right, rgba(0, 224, 255, 1), rgba(0, 133, 255, 1))`, }} >

请注意，我使用 ` 而不是 ' 解决了问题，而且我不知道为什么。

Answer 6

for react version 17.0.2, i used bacgroundImage property to style div background as follows:

   <div
    style={{
      backgroundImage: "linear-gradient(yellow,lightgreen)",
      color: "darkred",
    }}
  >
    Inline style in react background: linear-gradient
  </div>

Answer 7

你拼错transparent了Transparente。这有效：linear-gradient(to bottom, transparent 0%,transparent 50%,red 50%,red 100%)