使用线性渐变将 X 更改为不同的颜色

Question

我找到了这段代码，但我对如何更改 X 的颜色感到困惑。有人可以告诉我怎么做吗？这就是我要寻求帮助的原因。

而且，我需要为此使用 RGBA 吗？

https://jsfiddle.net/58tfv09z/

如果我是，那么就有

HEX 到 RGBA 转换器

http://hex2rgba.devoth.com

和

RGB 到 RGBA 转换器

http://jsfiddle.net/wb5fwLoc/1/

.crossed {
    width: 266px;
    height: 266px;
    border:  3px solid red;
    background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%),
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%);

<div class="crossed"></div>

Answer 1

它使用linear-gradient通过设置其他部分不可见来显示一条线，您可以通过alpha channel = 1修改可见部分来改变颜色：

.crossed {
    width: 266px;
    height: 266px;
    border:  3px solid red;
    background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,255,0,1) 50%, /* put your rgb value here */
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%),
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,255,255,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%);
}

<div class="crossed"></div>

您可以找到更多详细信息here。