冒险在CSS半透明土地

最近，我被要求对一个登录页做一些调整，在代码中我发现了两个半透明的覆盖层，它们的RGB值都是相同的。类似于这样的： There was no purpose to having two of them other than the fact that having just one didn\"t tint the image enough. For some reason, whoever initially coded that page thought that adding another semitransparent overlay was a better idea than increasing the opacity的第一层。所以，我决定放弃一个层，给剩下的一个opacity的值，这个值将给出一个与初始层相同的视觉效果，通过使用两个层给出。好吧，但是我们如何得到一层等效物的opacity？如果你还记得我在mask合成中的速成课程，那么你可能猜到了答案，因为它与我们在add合成操作中使用的公式完全相同！给定两层alphasa0和a1，得到的alpha是： a0 + a1 - a0⋅a1 下面的交互式演示展示了两层叠加alphasa0和a1（可以通过范围输入控制）和一层叠加alpha为a0 + a1 - a0⋅a1的对比效果。够有趣的，如果我们移除图像（通过演示底部的复选框），它们看起来是一样的，但是看起来与下面的图像有些不同。也许区别只是我的眼睛在捉弄我，因为图像的某些部分较浅，而另一些部分较暗。如果我们不把它们并排放在一起，我们只需在两层alphasa0和a1和一层alphaa0 + a1 - a0⋅a1之间切换，看起来肯定没有什么不同。这可以扩展到多层。在这种情况下，我们计算底部两层的等效层，然后这个结果的等效层和它上面的层，以此类推：将多个半透明层减少为一个半透明层。玩这个游戏也让我想知道固体background相当于一个固体层（c0），上面有一个半透明覆盖层（c1，alpha为a）。在这种情况下，一层等效物的background以每个通道为基础计算，得到的通道为： ch0 + (ch1 - ch0)*a …其中ch0是固体底层的通道（red、green或blue），ch1是顶部半透明层的相应通道，a是相同顶部的α半透明层。将其放入Sass代码中，我们有： /* per channel function */@function res-ch($ch0, $ch1, $a) {@return $ch0 + ($ch1 - $ch0)*$a}@function res-col($c0, $c1, $a) {$ch: \"red\" \"green\" \"blue\"; /* channel names */$nc: length($ch); /* number of channels */$ch-list: ();@for $i from 0 to $nc {$fn: nth($ch, $i + 1);$ch-list: $ch-list,res-ch(call($fn, $c0), call($fn, $c1), $a);}@return RGB($ch-list)} 下面的交互式演示（通过单击样例和alpha值，我们可以选择两个层的RGB值以及顶部层的alpha，分别）显示了两层与我们计算的单层等效物的对比外观。根据设备、操作系统和浏览器的不同，您可能会看到上面演示中的两个面板有相同的背景…或者没有。公式是正确的，但不同操作系统和设备上的不同浏览器处理两层情况的方式可能不同。预期结果，左侧面板相同，而在两层情况（右上角）和一层情况下，我们有时会得到稍微不同的结果场景（右下角）。我要求在Twitter上提供一个简化测试用例的截图，从我得到的回复来看，无论我们谈论的是Android还是iOS设备，以及Firefox，无论操作系统如何，这两个面板在移动浏览器上看起来总是一样的。在Windows上，它们似乎也几乎总是相同的，不过我确实收到了一封回复，让我知道Chrome和Chromium Edge有时可能会以不同的方式显示两个面板。在macOS和Linux上使用WebKit浏览器时，结果非常复杂，大多数情况下面板略有不同。也就是说，切换到sRGB配置文件可能会使它们完全相同。最有趣的是，在使用双监视器设置时，将窗口从一个监视器拖到另一个监视器可以决定两个面板是出现还是消失。然而，在实际的用例场景中，差别非常小，我们永远不会让两个面板并排出现。即使存在差异，也没有人会知道，除非他们在不同的场景中测试页面，这可能是一个web开发人员无论如何都会做的事情。而且，在不同的设备、操作系统和浏览器上，相同的纯色背景看起来也不一样。例如，在CSS技巧上经常使用的#ffa800，在我的Ubuntu和Windows笔记本电脑上看起来就不一样了。同样的道理，人们的眼睛可能会以不同的方式感知事物

冒险在CSS半透明土地

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么