需要協助將內容居中並使圖像連結可點擊
P粉794851975
P粉794851975 2023-09-13 12:12:49
0
1
647

本質上,我需要圖像和標題位於螢幕中央,但我還需要圖像可點擊並打開連結。我相信我有正確的程式碼來做到這一點,但我仍然遇到這兩個問題。圖像也有兩種不同的尺寸,因此也變得非常困難。我只是嘗試將紅色藥丸變小,將藍色藥丸變大(相對於它們的原始大小)。

不必擔心其他 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>

P粉794851975
P粉794851975

全部回覆(1)
P粉649990163

我對您的目標有所猜測,但是您不需要居中對齊映像容器嗎?我已在 #background 選擇器上執行了此操作。

然後,我將調整大小的職責移至錨點,並將其顯示屬性設為 inline-block。這迫使它們完全包含圖像(請參閱為什麼錨標記不採用其包含元素的高度和寬度)。我還將圖像的最大寬度設定為 100%。這一切都是在 CSS 中完成的,因為內聯樣式效率低下並且應該避免。

圖像大小不等。您可以使用 CSS 以多種方式處理該問題,但最好的解決方法是調整它們的大小以匹配。我會將較大的尺寸縮小到與較小的尺寸相同。

僅供參考,您的樣式元素位於 head 和 body 元素之外。這是無效的 HTML。將其放入 head 元素內。

此外,中心元素很長已棄用,不應使用。

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>
  <!-- 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>

    <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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板