本文是为了解决点击头像，出现一个遮罩层，显示上传头像。先说一下思路，第一种是用动画的方式来移动位置，但是ie9不支持动画，ie8一下直接不支持位置移动。所以某就研究了第二种方式，就是利用相对位置的固定和display的是否显示来控制遮罩层，实现效果都差不多，个人推荐第二种，但是第一种有动画，对，就是那个高逼格的东西。直接上代码：
第一种：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.circle{
width: 100px;
height: 100px;
position: relative;//设定相对位置
overflow: hidden;//超出部分隐藏
}
.circle0{
width: 100px;
height: 100px;
background-color: red;
}
.circle1{
width: 100px;
height: 100px;
background-color: green;
opacity: 0.6;//遮罩层的透明度
transition: transform 1s ease;//动画，有点坑爹的是不支持ie9以下的版本，后面再研究一下有没有更好的办法
}
.circle:hover > .circle1 {
transform: translateY(-100%);//位置移动
}
</style>
</head>
<body>
<div id="app">
<div class="circle">
<div class="circle0"></div>
<div class="circle1"></div>
</div>
</div>
<script src="/vue"></script>
<script>
var app = new Vue({
el: '#app',
data(){
return{
}
},
methods: {
}
})
</script>
</body>
</html>
第二种，这个例子没用VUE，个人觉得主要是思路重要点，相信用得着的哥们也能在vue中轻松完成，要是真的有不会的，可以留个言啥的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全屏div</title>
<style>
#a{
width: 100px;
height: 100px;
background: #999999;
}
#b{
width: 100%;
height:100%;
background: red;
}
#c {
width:100%;
height:100%;
background-color:#000;
position:relative;//设定位置关系
left:0px;
top:-100px;
z-index:2;
opacity:0.3;
/*兼容IE8及以下版本浏览器*/
filter: alpha(opacity=30);
display:none;//控制显示不显示
}
</style>
<script>//这里用的是js，vue自己可以实现的，这里就不给出了，留一个悬念
function shield(){
var s = document.getElementById("c");
s.style.display = "block";
}
</script>
</head>
<body>
<a href="javascript:shield()">open</a>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>
赠人玫瑰，手留余香。
