当前位置主页 > 资料库 > 前端教程 > 使用混合模式打造复古风格的图片边框

使用混合模式打造复古风格的图片边框

2015-09-29

在页面上呈现的图片的边框通常都是平整的直线。我们可以通过CSS技术来为图片添加漂亮的应用边框,圆形边框等,但是要如何制作出不规则形状的图片边框呢?CSS的混合模式可以帮助我们解决这个问题。

首先让我们准备一张具有复古色彩的图片。

复古汽车

然后我们需要一个复古风格的图片边框,最好使用灰度,16或32bit的PNG图片来制作图片的边框。类似下面的图片:

图片边框

背景图片的制作

理论上,所有的HTML元素都可以作为背景图像来使用,包括图片元素。但不幸的是,在这个例子中,背景图像被作为图层来使用,这会使得它在混合模式中不会正常工作。所以,我们换一种思路,将图片放置在一个容器中,让容器具有一个背景图像。

<div>
    <img src="1.jpg" alt="">
</div>                              
                            

为它们添加一些CSS样式:

div { 
    background-color: #fff;
    background-image: url(masque-24.png);
    background-size: cover;
    }
div img { width: 100%; }                              
                            

选择使用哪一种混合模式有一些小技巧,这要根据容器的背景图像的颜色来决定。在这个例子中,我们选择screen模式:

div img { mix-blend-mode: screen; }                              
                            

通过上面的设置,我们得到了下面的图像:

复古汽车

感觉是不是很酷呢?

替代方法

实现这种图片边框效果还有一些其它的替代方法,但是它们都有一定的缺陷。

  • Webkit内核的浏览器有一个image-mask属性,但它是飞标准的,只会在Chrome和Safari浏览器上正常工作。
  • 虽然所有的现代浏览器都支持border-image属性,但是它更适合于制作规则的几何图形边框。

总之,使用CSS混合模式来制作这种复古风格的图片边框是非常不错的选择。

Previous:
上一篇:Bootstrap 4 新特性预览
Next:
下一篇:【恒创科技】十月新购主机,续费“0元”
返回顶部