Question

我发现了这段代码，但我对如何更改X的颜色感到困惑。有人可以告诉我如何操作吗？这就是我要求帮助的地方。

而且，我是否需要使用RGBA？

this site

如果我，那就

HEX到RGBA转换器

https://jsfiddle.net/58tfv09z/

和

RGB到RGBA转换器

http://hex2rgba.devoth.com

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

您可以找到更多详情here。

使用“线性渐变”将X更改为其他颜色

1 个答案: