反應背景中的內聯樣式：線性漸變

Question

我正在嘗試使用具有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"}}/>

提前致謝。

Answer 1

我認為您沒有正確編寫代碼。 請參閱本網站示例的示例

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

Answer 2

使用此代碼：

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

Answer 3

所以，我遇到了你的帖子，因為我遇到了同樣的問題，但我找到了解決方案。

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

請注意，我使用 ` 而不是 ' 解決了這個問題，但我不知道為什么。

Answer 4

像這樣與變量一起使用

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

Answer 5

我有這樣的事情：

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

這是行不通的，因為; 在linear-gradient的末尾。 我刪除了它並且它起作用了。

Answer 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)));

Answer 7

你拼錯transparent與Transparente 。 這有效： linear-gradient(to bottom, transparent 0%,transparent 50%,red 50%,red 100%)

Answer 8

我可能有點晚了，但我找到了一個解決方案，我做了什么，我將它添加到 css 頁面中，然后檢查元素。 例如：對於*背景：線性漸變（向右，#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 組件的內聯樣式中使用它並根據需要編輯它。

Answer 9

如果你想內聯這樣做，這對我有用。

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

Answer 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>

Answer 11

使用幾乎可以很好地處理CSS的樣式化組件。 https://www.styled-components.com/docs/basics

Answer 12

我相信對於漸變背景，您必須使用 background-image 屬性。 所以它應該看起來像這樣。 你也有一個關於透明的錯字。

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