Question

所以说我有<div>，我希望它看起来像this album cover之类的光泽哑光表面

我可以在该div上拍一个linear-gradient，一点问题都没有。但这看起来像是渐变-人工的。光泽是弯曲且不切实际的，没有纹理，只是看起来是假的。

除了photoshop之外，我该如何重现这种效果？

Answer 1

我认为您可以使用CSS渐变和滤镜来接近模糊。这是我的示例，虽然不完全正确，但可能是正确的方向：

.matte{
  width: 150px;
  height: 150px;
  background-color: black;
}
 .finish{
   background: -moz-linear-gradient(top, rgba(124,124,124,0.5) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(124,124,124,0.5) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(124,124,124,0.5) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   width: 100%;
   height: 100%;
   opacity: 0.3;
   filter: blur(10px)
}

<div class="matte">
  <div class="finish">
  
  </div>
</div>

如何在CSS / SVG中创建逼真的光泽效果？

1 个答案: