图片全屏适配显示人物与按钮Hover交互效果实现咨询

问题1：让背景图片填满屏幕同时完整显示人物 #

当前背景图片缺少尺寸与定位配置，导致人物显示不全。通过以下CSS调整即可解决：

• 给.split类添加background-size: cover，确保图片完全覆盖容器
• 添加background-position: center，让图片居中对齐，保证人物主体完整呈现
• 补充background-repeat: no-repeat避免图片重复排列

问题2：鼠标悬停时按钮文字变紫色+背景图片缩放 #

无需额外JavaScript，直接用CSS伪类即可实现更简洁的交互：

• 给.profileselect添加:hover状态，将文字颜色改为紫色（示例用#9370DB）
• 给.split添加:hover状态，调整background-size实现背景缩放效果，配合过渡动画保证流畅性
• 移除原JavaScript中的缩放逻辑，用CSS统一控制更易维护

修改后的完整代码 #

HTML代码

<!doctype html>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.98.0">
    <title>StudioPick</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

    <link href="CSS/profileselect.css" rel="stylesheet">
  </head>
  <body class="d-flex h-100 text-center text-white">
    <!---Navbar---&gt;
      <header>
        <nav class="navbar navbar-expand-lg navbar-light">
          <div class="container-fluid">
            <a style="font-size: 45px; color: #ffffff;" class="navbar-brand" href="#">
              <strong>StudioPick</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" style="color: #ffffff;" aria-curresnt="page" href="index.html">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" style="color: #ffffff;" href="login.html">Log In</a>
                  </li>
                  <li class="nav-item2">
                    <a class="nav-link" href="signup.html">Sign Up</a>
                  </li>
                </ul>
              </div>
          </div>
        </nav>
      </header>
    <!---Navbar---&gt;

    <!---Hero---&gt;
    <div class="split left">
        <div class="centered">
          <button class="profileselect">STUDIO</button>
        </div>
    </div>
      
    <div class="split right">
        <div class="centered">
            <button class="profileselect">ARTIST</button>
        </div>
    </div>
    <!---Hero---&gt;

      <footer class="mt-auto text-white-50" id="footer">
        <p>@Bekaedo <br>StudioPick 2022 ©</p>
      </footer>
    </div>
  </body>
</html>

CSS代码

body {
    font-family: Arial;
    color: white;
}
.navbar-light {
  background-color: transparent;
  z-index: 20;
}
.navbar-nav{
  justify-content: space-between;
}
.navbar-brand {
  font-size: 35px;
}
.nav-item{
  color: #686868 !important;
  font-size: 20px;
  padding-right: 15px;
}
.nav-item2{
  background-color: #9370DB !important;
  border-radius: 15px !important;
  width: 95px !important;
  text-align: center !important;
  font-size: 20px;
}
#navbarSupportedContent{
  position: relative;
  right: -1375px;
}

.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 0;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
    transition: all 0.3s ease-in-out;
    /* 解决背景图片显示问题 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.left {
    left: 0;
    background-image: url('../Images/kennybeats-stu.jpeg')
}

.right {
    right: 0;
    background-image: url('../Images/uzi-performing.jpeg')
}

.centered button {
    font-size: 50px !important;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background-color: #000000 !important;
    text-align: center !important;
    /* 按钮过渡动画 */
    transition: all 0.3s ease-in-out;
}

/* 鼠标悬停：按钮文字变紫+缩放 */
.profileselect:hover {
    color: #9370DB !important;
    transform: translate(-50%, -50%) scale(1.2);
}

/* 鼠标悬停：背景图片缩放 */
.split:hover {
    background-size: 110%;
}

JavaScript代码（可移除）

// 原交互逻辑已用CSS实现，该文件可直接删除

内容的提问来源于stack exchange，提问作者user18694296