我希望 div 具有filter:opacity(0.5)白色背景上的“灰色”外观，但我不想真正使其透明。我该怎么做呢？我知道一个解决方案就是在其后面放置另一个带有白色背景的元素，但我正在寻找一种仅具有 CSS 滤镜效果的更简单的解决方案。
我将解释@codebreaker答案背后的数学原理，并尝试提供一个通用公式。我将依赖之前的答案，其中我定义了一些过滤函数的公式。
我们有f(x) = p*(x - 255/2) + 255/2为了contrast(p)和f(x) = x*p为了brightness(p)
为了获得contrast(p1) brightness(p2)我们混合这两个函数
f(x) = p2*(p1*(x - 255/2) + 255/2)
我们简化为
f(x) = p1*p2(*x - 127.5) + p2*127.5
现在opacity(p)我们有参考
f(x) = x*p + C*(1 - p)
C图像的背景颜色在哪里，在您的情况下您认为是白色，所以我们可以将其替换255为
f(x) = x*p + 255*(1 - p) = p*(x - 255) + 255
现在我们只是希望两个函数（不透明度函数和对比度亮度函数）相同，因此我们可以写
p1*p2*(x - 127.5) + p2*127.5 = p*(x - 255) + 255
对于p=0.5, p1=1/3,p2=1.5=3/2我们将有
1/2*(x - 127.5) + 3/2*127.5 = 1/2*(x - 255) + 255
1/2*x - 127.5/2 + 3/2*127.5 = 1/2*x + 127.5
...
0 = 0
这解释了您正在使用的值之间的关系。您还可以找到所需的任何其他值组合。
对于一般情况，我们可以考虑：
p1*p2*(x - 127.5) + p2*127.5 = p*(x - 255) + 255
x*(p1*p2 - p) + p2*127.5*(1 - p1) + p*255 - 255 = 0
我们应该有(p1*p2 - p) = 0，p2*127.5*(1 - p1) + p*255 - 255 = 0所以我们得到
p1*p2 = p
p2*(1 - p1) = (1 - p)*2
最后
p2 = 2 - p
p1 = p/(2 - p)
如果我们考虑不透明度，0.25我们将得到：
p2 = 1.75
p1 = 1/7
f(x) = p2*(p1*(x - 255/2) + 255/2)
f(x) = p1*p2(*x - 127.5) + p2*127.5
| 归档时间： |
|
| 查看次数： |
899 次 |
| 最近记录： |