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

思路:在::before中设置background-image和opacity

代码如下:

html 复制代码
<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> 
相关推荐
m0_748240254 分钟前
前端如何检测用户登录状态是否过期
前端
black^sugar5 分钟前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人1 小时前
前端知识补充—CSS
前端·css
GISer_Jing1 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245521 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v1 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing1 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!
前端·开源·github
2401_857600951 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600951 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL1 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js