1.html部分
简简单单，一个盒子放上我们的头像，后面会使用 js 操作它，整体思路就是css3新特性渲染，借助 js 更换图片，对不同图片进行200X200的渲染。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="../css/4.css"> </head> <body> <div class="box"> <img src="../image/头像.jpg" alt="" width="200" height="200" id="wo"> </div> <input type="file" id="tou"> </body> </html>
2.css部分
-webkit-mask: linear-gradient(100deg,#000 10%, transparent 60%,transparent); 提示：很在乎兼容性的场景，目前慎用
.box{ position: relative; width: 200px; height: 200px; margin-top: 50px; } .box::after{ position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; background-image: url(../image/国旗.png); background-size: cover; /* 除了 webkit 内核的浏览器，其他浏览器的兼容不太友好 */ -webkit-mask: linear-gradient(100deg,#000 10%, transparent 60%,transparent); }
3.js部分
<script> var fileName = document.getElementById("tou"); var img = document.getElementById("wo"); fileName.onchange = function(){ img.src = URL.createObjectURL(this.files[0]); } </script>
效果演示：
