html css背景图片透明文字不透明

2023-12-20 06:41:06

思路：在::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>

文章来源:https://blog.csdn.net/zouxin_88/article/details/135085132
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。