我们的设计师更喜欢以 .psd (Photoshop) 格式提供网页设计。当我们开始创建页面标记和样式时，我们通常不得不妥协设计以支持我们可用的工具。当然，后者取决于实现页面的人的技能，但是鉴于以下示例，研究并得出正确的 CSS 技术来实现设计的一般方法是什么？
有问题的示例如下：在 Photoshop 中，基于文本的登录按钮最终结果如下所示：
这基本上是一个带有效果 (Fx) 的 [T]（文本）元素。效果是看起来像这样设置的颜色叠加：
没有这个效果，PSD中的登录页面看起来是这样的：
这正是它在浏览器页面中的外观。如果我们要让它看起来与最终的 .psd 设计完全相同，我们将如何寻找正确的 css-technique 示例？
我们将登录链接实现为<button>具有给定 .css 类的元素。我试过用 backgound-blend-mode: normal 像这样：
.login-box .login-button {
width: 100%;
height: 100%;
margin-left: 12.4vmax;
margin-top: 0.7vmax;
background: #5f6f8f;
border: 0;
outline: 0;
font-family: "OpenSansRegular";
color: rgb(57, 68, 98);
font-size: 0.9vmax;
font-weight: 700;
background-color: #5f6f8f;
background-blend-mode: normal;
}
但它在 Chrome 中给出了以下外观：
我意识到这个问题可能与我们正在使用网络字体技术这一事实有关，它不受浏览器中的样式的影响，就像在 Photoshop 中影响文本一样，但我很感激有关如何处理上述问题的提示-描述的问题。谢谢你。