CSS 给图片加上不规则边框
要显示图片:
要加上的边框:
mask图片:
最终效果:
本文是通过CSS属性mask来实现的。
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img {
width: 200px;
height: 200px;
/* 要显示的图片作为背景 */
background: url(./img.jpg) no-repeat;
background-size: 100% 100%;
/* mask所需要的图片 原理是 mask属性会将图片的透明部分不显示,只显示有颜色的部分 */
-webkit-mask-image: url(./mask.png);
-webkit-mask-size: 100% 100%;
}
.img img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="img">
<!-- 要加上的边框图片 -->
<img src="./border-img.png" alt="">
</div>
</body>
</html>