Question

所以，这是JSFIDDLE。

在这里，您看到header带有background颜色渐变：

background: linear-gradient(to right, #827099 0%, #dc5562 100%)

我还有span :before css属性，模仿其背后的背景颜色。

这样做的目的是获得一个＆＃34; cut＆＃34;作为单词＆＃34; THIS＆＃34;的一部分。你会注意到＆＃34; T＆＃34;的左上部分。缺少或更像隐藏在:before属性后面。

我遇到的问题是因为背景颜色为linear-gradient，当屏幕宽度发生变化时，线性渐变也会发生变化（您可以通过缩小浏览器窗口来看到））

渐变中的此更改不会反映在:before属性上，也不再与背景颜色匹配。

有没有办法解决这个问题，同时保持背景的线性渐变？

Answer 1

不确定这是否适用于您的用例，但您可以设置线性渐变，以确保颜色更改在清除切口之前不会发生。

您可以将渐变中的第一个停靠点设置为填充的宽度（118px）加上剪裁边框的宽度（21px），然后将剪辑边框颜色更改为与渐变的起始颜色相同。在下面的示例中，我向上舍入为140px。

https://jsfiddle.net/6dvy7dks/

.head {
  background: linear-gradient(to right, #827099 140px, #dc5562 100%);
}

span.first:before {
    border-top-color: #827099;
    border-left-color: #827099;
}

CSS对父颜色透明

1 个答案: