CSS对父颜色透明

在这里，你看到header与background颜色渐变：

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

我也有span与模仿其背后的背景颜色:before的CSS属性。

这样做的目的是作为单词“THIS”的一部分获得“剪切”特征。您会注意到“T”的左上角部分丢失或更像隐藏在:before属性后面。

我遇到的问题是，由于背景色为linear-gradient，当屏幕宽度的变化，所以没有线性渐变（你可以通过浏览器窗口小见）

这种变化渐变不反映在:before属性上，它不再匹配背景颜色。

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

来源

2017-05-18 steve Kim

您可以尝试采用同样的梯度剪辑三角形和给它的是线与背景渐变的更多或更少的比例较大 - 但这一比例将是相对clip-triangle，并且您需要添加一个JavaScript侦听器来重新计算浏览器调整大小时的渐变百分比（在三角形上），或者它不匹配。 – admcfajn

不知道这是否是您的用例的选项，但您可以设置线性渐变以确保在清除切口之后颜色变化不会发生。

您可以将渐变中的第一站设置为填充宽度（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; 
}

来源

2017-05-18 02:48:51 Pango

CSS对父颜色透明

回答

相关问题