哈喽!C站的小伙伴,由于最近一直在学习 java,很久没有来C站了,前一阵很火的头像,只需要一行 css3代码就搞定了,快来看看吧!
1.html部分
简简单单,一个盒子放上我们的头像,后面会使用 js 操作它,整体思路就是css3新特性渲染,借助 js 更换图片,对不同图片进行200X200的渲染。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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>
效果演示: