需要帮助将内容居中并使图像链接可点击-PHP中文网问答

本质上，我需要图像和标题位于屏幕中央，但我还需要图像可单击并打开链接。我相信我有正确的代码来做到这一点，但我仍然遇到这两个问题。图像也有两种不同的尺寸，因此也变得很困难。我只是尝试将红色药丸变小，将蓝色药丸变大（相对于它们的原始大小）。

不必担心其他 3 个图像的背景关键帧。我只需要有关标题居中以及红色和蓝色药丸图像的帮助。

我尝试使用在线代码，但仍然遇到相同的错误。我尝试过将图像调整为不同的尺寸，尝试过不同的居中技术，但似乎无法实现。

body {
    margin: 0;
    overflow: hidden;
  }
  
  #content {
    position: relative;
    z-index: 2;
    padding: 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-family: Arial, sans-serif;
    font-size: 24px;
  }
  
  @keyframes matrix-rain {
    0% {
      background-image: url("matrix-pride.png");
    }
    5% {
      background-image: url("matrix-stripes.png");
    }
    10% {
      background-image: url("matrix-green.png");
    }
    15% {
      background-image: url("matrix-pride.png");
    }
    20% {
      background-image: url("matrix-stripes.png");
    }
    25% {
      background-image: url("matrix-green.png");
    }
    30% {
      background-image: url("matrix-pride.png");
    }
    35% {
      background-image: url("matrix-stripes.png");
    }
    40% {
      background-image: url("matrix-green.png");
    }
    45% {
      background-image: url("matrix-pride.png");
    }
    50% {
      background-image: url("matrix-stripes.png");
    }
    55% {
      background-image: url("matrix-green.png");
    }
    60% {
      background-image: url("matrix-pride.png");
    }
    65% {
      background-image: url("matrix-stripes.png");
    }
    70% {
      background-image: url("matrix-green.png");
    }
    75% {
      background-image: url("matrix-pride.png");
    }
    80% {
      background-image: url("matrix-stripes.png");
    }
    85% {
      background-image: url("matrix-green.png");
    }
    90% {
      background-image: url("matrix-pride.png");
    }
    95% {
      background-image: url("matrix-stripes.png");
    }
    100% {
      background-image: url("matrix-green.png");
    }
  }
  
  #background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    animation: matrix-rain 10s linear infinite;
  }
  
  #header {
    font-family: fantasy;
    color: white;
    text-align: center;
    font-size: 400%;
    margin-top: 50px;
  }

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head>

<body>
  <div id="background">
    <h1 id="header">Pills</h1>
    
    <center>
      <a href="google.com"><img src="https://i.stack.imgur.com/D8d6J.png" style="width:35%;height:15%;"></a>
      <a href="google.com"><img src="https://i.stack.imgur.com/wPa6r.png" style="width:40%;height:20%;"></a>
    </center>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

body { margin: 0; overflow: hidden; } #content { position: relative; z-index: 2; padding: 20px; text-align: center; color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 24px; } @keyframes matrix-rain { 0% { background-image: url("matrix-pride.png"); } 5% { background-image: url("matrix-stripes.png"); } 10% { background-image: url("matrix-green.png"); } 15% { background-image: url("matrix-pride.png"); } 20% { background-image: url("matrix-stripes.png"); } 25% { background-image: url("matrix-green.png"); } 30% { background-image: url("matrix-pride.png"); } 35% { background-image: url("matrix-stripes.png"); } 40% { background-image: url("matrix-green.png"); } 45% { background-image: url("matrix-pride.png"); } 50% { background-image: url("matrix-stripes.png"); } 55% { background-image: url("matrix-green.png"); } 60% { background-image: url("matrix-pride.png"); } 65% { background-image: url("matrix-stripes.png"); } 70% { background-image: url("matrix-green.png"); } 75% { background-image: url("matrix-pride.png"); } 80% { background-image: url("matrix-stripes.png"); } 85% { background-image: url("matrix-green.png"); } 90% { background-image: url("matrix-pride.png"); } 95% { background-image: url("matrix-stripes.png"); } 100% { background-image: url("matrix-green.png"); } } #background { position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; background-size: cover; background-position: center; animation: matrix-rain 10s linear infinite; text-align: center; } #background a { display: inline-block; max-width: 40%; } #background a img { max-width: 100%; } #header { font-family: fantasy; /* color: white; */ text-align: center; font-size: 400%; margin-top: 50px; }

<head>  <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <title>Hello, world!</title> </head> <body> <div id="background"> <h1 id="header">Pills</h1> <a href="https://google.com"><img src="https://i.stack.imgur.com/D8d6J.png"></a> <a href="https://google.com"><img src="https://i.stack.imgur.com/wPa6r.png"></a> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body>