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

【问题标题】：Inline style in react background: linear-gradient反应背景中的内联样式：线性渐变
【发布时间】：2019-03-27 18:50:06
【问题描述】：

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

这是我的代码：

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

当我为背景添加“简单”颜色时，即没有linear-gradient，效果很好。

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

提前致谢。

【问题讨论】：

没有Transparente颜色。试试transparent。
我同意@GabrielePetrioli 尝试：linear-gradient(to bottom, Transparent 0%,Transparent 50%,red 50%,red 100%

标签： javascript html css reactjs

【解决方案1】：

我认为您的代码编写不正确。查看本站示例examples

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

【讨论】：

【解决方案2】：

使用此代码：

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

【讨论】：

【解决方案3】：

所以，我遇到了你的帖子，因为我遇到了同样的问题，但我找到了解决方案。

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

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

【讨论】：

【解决方案4】：

像这样与变量一起使用

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

【讨论】：

【解决方案5】：

我有类似的东西：

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

由于linear-gradient 末尾的;，这不起作用。我删除了它，它起作用了。

【讨论】：

【解决方案6】：

请使用以下代码添加渐变并更改值（适用于 Safari 和 Chrome）

-webkit-gradient: (linear, left top, right top, from(rgba(0,0,0,0.5)), color-stop(50%, rgba(0,0,0,0.2)));

【讨论】：

这是我在下面的回复的重复：stackoverflow.com/questions/52950627/…

【解决方案7】：

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

【讨论】：

请不要发布仅指出印刷问题或缺少字符的答案。这样的答案不太可能帮助未来的访问者，因为它们特定于 OP 的代码。相反，请根据help center 标记或投票以将问题关闭为题外话。

【解决方案8】：

我可能有点晚了，但我找到了一个解决方案，我做了什么，我将它添加到 css 页面中，然后检查元素。例如：for * background: linear-gradient(to right, #000 0%, #000 50%, #fff 50% #fff 100%)*;如果你使用检查元素检查它，你会发现： -webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50 %, #fff)) 。因此，只需在您的反应组件的内联样式中添加最后一行：

<div className="card" style={{background:"-webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50%, #fff))"}}/>

对于我的示例，我使用上面的这个代替：

<div className="card" style={{background: linear-gradient(to right, #000 0%,  #000 50%, #fff 50% #fff 100%)"}}/>

因此，总之，将它添加到一个 css 文件中，它会起作用，在“检查元素”中查看输出，然后使用它并在你的 react js 组件的内联样式中随意编辑它。

【讨论】：

【解决方案9】：

如果您尝试内联，这对我有用。

<Button style={{ backgroundImage: 'linear-gradient(#f67a36,#ed008c)' }}/>

【讨论】：

【解决方案10】：

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>

【讨论】：

【解决方案11】：

我相信对于渐变背景，您必须使用 background-image 属性。所以它应该看起来像这样。你也有一个透明的错字。

 &lt;div className="card" style="background-image:linear-gradient(to bottom, Transparent 0%,Transparent 50%,red 50%,red 100%)"&gt;&lt;/div&gt;

【讨论】：

这个答案是完全错误的。因为react 中的内联样式不同于内联css class。你的样式写成内联css class 格式。