思路:在::before中设置background-image和opacity
代码如下:
<template><div class="login_box"><form method="post"><input type="text" name="nickname"><br><input type="password" name="password"><br><input type="submit" value="登陆"></form></div>
</template><style type="text/css">
body {background-image: url("../Image/bglogin.png");background-repeat: no-repeat;background-size: 100%;
}.login_box::before {content: "";background-image: url("../Image/bg.png");opacity: 0.4;
}.login_box {position: absolute;left: 200px;top: 200px;width: 500px;height: 300px;box-shadow: 2px 2px 5px #888;border: 1px solid #666;text-align: center;
}form {display: inline-block;margin-top: 100px;
}input {display: block;width: 250px;height: 30px;border: 1px solid #fee;
}
</style>