用CSS给摄影图片加点伪景深效果

 2016-10-13 11:09

在我们日常生活中,常常会随手拍摄一些照片,有时候我们为了烘托幽暗的气氛,常常会给照片增加一层灰色的光圈效果。这样,能让我们的图片看起来效果很舒服:

用CSS给摄影图片加点伪景深效果

结合条纹背景的方法,我们考虑在其伪元素上增加两个不同方向的渐变阴影,使图片更好的出效果。但问题是<img>容器不支持伪元素的效果,通常我们的做法是给它增加一个结构,比如<a><div>等。也可以考虑在其父集上计算出遮罩范围用绝对定位来增加阴影。

增加的效果如下:

用CSS给摄影图片加点伪景深效果
用CSS给摄影图片加点伪景深效果


左图为增加后的效果,后图为原图效果。对于摄影者,不知道更喜欢哪种效果呢?

附上源代码:

div a:after{
    content: '';
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    background:
    linear-gradient(45deg,rgba(0,0,0,.6) 5%,transparent 24%,
    transparent 0,transparent 76%,rgba(0,0,0,.6) 95%),
    linear-gradient(135deg,rgba(0,0,0,.6) 5%,transparent 24%,
    transparent 0,transparent 76%,rgba(0,0,0,.6) 95%);
    z-index:5;
    transition:.4s;
  }
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: