Question

我正在尝试添加内联样式，但没有背景色视图。这是我的代码：

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

当我添加“简单”背景色时，效果很好。

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

谢谢。

Answer 1

所以，我看到您的帖子是因为我遇到了同样的问题，但我已经找到了解决方案。

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

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

Answer 2

使用此代码：

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

Answer 3

请使用以下代码添加渐变并更改值（对于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)));

Answer 4

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

Answer 5

我认为您没有正确编写代码。查看此网站的示例examples

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

Answer 6

也许我来晚了一点，但是我找到了一个解决方案，我做了什么，我将其添加到CSS页面中，然后检查该元素。例如：对于*背景：线性渐变（向右，＃000 0％，＃000 50％，#fff 50％#fff 100％）*;如果使用inspect元素对其进行检查，则会发现： -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组件的内联样式对其进行编辑。

Answer 7

如果您尝试以内联方式进行操作，那么这对我有用。

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

Answer 8

像这样与变量一起使用

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

Answer 9

我有类似的东西：

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

由于;末尾的linear-gradient，因此无法正常工作。我将其删除，并且有效。

Answer 10

我相信，对于渐变背景，您必须使用background-image属性。因此它应该看起来像这样。您还可以使用透明符号来打错字。

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

Answer 11

使用样式化的组件可以很好地处理CSS。 https://www.styled-components.com/docs/basics

React背景中的内联样式：lineargradient

11 个答案: