Question

我有一个填充线性渐变颜色的div。单击按钮我想要反转线性渐变颜色。我通过改变线性梯度值再次实现了它。我想知道的是，不是改变线性梯度值，而是有任何特定的CSS属性来反转线性渐变。希望你明白我的要求

＆＃13;

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%)";
}

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

Answer 1

您只需在线性渐变中切换to right和to left即可。

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

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)";
  }
}

Here is the JSFiddle demo

另请注意，这样做也会反转所有内容。因此，根据您想要实现的目标，这可能适合或不适合：）

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>

具有css属性的反向线性渐变

3 个答案: