如何旋转一个渐变而不是整个div？

Question

我在元素上有这个渐变，我试图只旋转渐变，但是当我尝试旋转它时，正如您在代码片段中看到的，整个元素都在旋转。

有什么想法吗？

#test {
  transform: rotate(180deg);
  color: #d3d3d3;
  background-color: #003366;
  background-image: none, linear-gradient(rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
  height: 200px;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  I'm gonna be some buttons and stuff
</div>

Answer 1

您可以简单地使用 degree 和 linear-gradient 来旋转它。在这种情况下，您必须使用 0deg（或 to top），因为 linear-gradient 的默认值是 to bottom，即 180deg

#test {
  color: #d3d3d3;
  background-color: #003366;
  background-image:linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
  height: 200px;
  width: 500px;
}

<div id="test">
  I'm gonna be some buttons and stuff
</div>

正如您在 documentation 中看到的，语法是：

linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

在哪里

<angle>

The gradient line's angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.

Answer 2

您想旋转 gradient（我认为）。默认是 180 度，所以像这样：

background-image: none, linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);

不过，对于 180 度，您只需反转颜色顺序即可

如何旋转一个渐变而不是整个div？

How to rotate a gradient rather than the whole div?

css

linear-gradients