Question

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

有什么想法吗？

＆＃13;

tidyr::separate

＆＃13;

d = data.frame(Var1 = c("174_1","174_1","174_2","174_3","175_1","175_1"))
temp = tidyr::separate(d, Var1, into=c("v1", "v2"), sep="_")
temp
   v1 v2
1 174  1
2 174  1
3 174  2
4 174  3
5 175  1
6 175  1
d[["Var2"]] <- temp[["v1"]]

＆＃13;

Answer 1

您只需使用linear-gradient度数来旋转它。在这种情况下，您必须使用 0deg （或to top），因为线性渐变的默认值为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;
  background-position: 0 0;
  position: relative;
}

<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>]+);

其中

＆LT;角度>

渐变线的方向角。值为0deg   相当于顶部;增加值从那里顺时针旋转。

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？

2 个答案: