使用CSS属性反转线性渐变

Question

我有一个填充有线性渐变颜色的div。当点击按钮时，我想要反转线性渐变颜色。我通过改变线性渐变值再次实现了它。但是，我想知道是否有任何特定的CSS属性可以反转线性渐变。希望你能理解我的请求。

var color  =  document.getElementById('color');
var btn = document.getElementById('reverse');
reverse.onclick = reverseColor;
function reverseColor(){
 color.style.background = "linear-gradient(to right, rgb(237,195 ,194) 0% ,rgb(237,195 ,194) 20%, rgb(226,167 ,165) 20% ,rgb(226,167 ,165) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(203,110 ,106) 60% ,rgb(203,110 ,106) 80%, rgb(192,81 ,77) 80% ,rgb(192,81 ,77) 100%)";
}

.linear{
  width:200px;
  height:30px;
  background: linear-gradient(to right, rgb(192,81 ,77) 0% ,rgb(192,81 ,77) 20%, rgb(203,110 ,106) 20% ,rgb(203,110 ,106) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(226,167 ,165) 60% ,rgb(226,167 ,165) 80%, rgb(237,195 ,194) 80% ,rgb(237,195 ,194) 100%);
}

<div id="color" class="linear">

</div>
<button id="reverse" style="margin-top:50px">
Reverse Gradient
</button>

- Santhosh Kumar

---

JS Fiddle希望这可以帮助你。 - xaid

Answer 1

在线性渐变中，您可以切换向右和向左。

JSFIDDLE

以下是代码：

var color = document.getElementById('color');
var btn = document.getElementById('reverse');
myVar = "left";

function colorfn() {
  color.style.background = "linear-gradient(to " + myVar + ", rgb(237,195 ,194) 0% ,rgb(237,195 ,194) 20%, rgb(226,167 ,165) 20% ,rgb(226,167 ,165) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(203,110 ,106) 60% ,rgb(203,110 ,106) 80%, rgb(192,81 ,77) 80% ,rgb(192,81 ,77) 100%)";
}
btn.onclick = function() {
  myVar = myVar == "left" ? "right" : "left";
  colorfn();
}

colorfn();

.linear {
  width: 200px;
  height: 30px;
}

<div id="color" class="linear">

</div>

<button id="reverse" style="margin-top:50px">
  Reverse Gradient
</button>

- shubham agrawal

Answer 2

好的，除了使用你所做的to right关键词外，实际上没有一个特定的CSS属性来实现这一点。但是如果你真的需要，有一种“hackish”方法可以做到。

我会这样做：

var color = document.getElementById('color');
var btn = document.getElementById('reverse');
reverse.onclick = reverseColor;

var transformDeg = 0;

function reverseColor() {

  if (transformDeg == 0) {
    transformDeg = 180;
    color.style.transform = "rotateY(" + transformDeg + "deg)";
  } else {
    transformDeg = 0;
    color.style.transform = "rotateY(" + transformDeg + "deg)";
  }
}

这里是 JSFiddle 演示

同时请注意，以这种方式操作也会反转所有内容。因此，这取决于您想要实现什么目标，可能适合或不适合 :)

- Ahs N

Answer 3

你可以添加一个类。

var color = document.getElementById('color');
var btn = document.getElementById('reverse');
reverse.onclick = reverseColor;

function reverseColor() {

  color.classList.toggle('reverse');
 
}

.linear {
  width: 200px;
  height: 30px;
  background: linear-gradient(to right, rgb(192, 81, 77) 0%, rgb(192, 81, 77) 20%, rgb(203, 110, 106) 20%, rgb(203, 110, 106) 40%, rgb(215, 138, 136) 40%, rgb(215, 138, 136) 60%, rgb(226, 167, 165) 60%, rgb(226, 167, 165) 80%, rgb(237, 195, 194) 80%, rgb(237, 195, 194) 100%);
}

.reverse {
  background: linear-gradient(to right, rgb(237, 195, 194) 0%, rgb(237, 195, 194) 20%, rgb(226, 167, 165) 20%, rgb(226, 167, 165) 40%, rgb(215, 138, 136) 40%, rgb(215, 138, 136) 60%, rgb(203, 110, 106) 60%, rgb(203, 110, 106) 80%, rgb(192, 81, 77) 80%, rgb(192, 81, 77) 100%)
}

<div id="color" class="linear">

</div>
<button id="reverse" style="margin-top:50px">
Reverse Gradient
</button>

- Aslam

---

老兄，这行不通。如果有很多DIV线性背景要反转，我不能为每个div单独创建一个类来反转。 - Santhosh Kumar

只需将按钮放在主 div 中并通过 js 使用父元素即可。 - Aslam