需要協助將內容居中並使圖像連結可點擊

Question

本質上，我需要圖像和標題位於螢幕中央，但我還需要圖像可點擊並打開連結。我相信我有正確的程式碼來做到這一點，但我仍然遇到這兩個問題。圖像也有兩種不同的尺寸，因此也變得非常困難。我只是嘗試將紅色藥丸變小，將藍色藥丸變大（相對於它們的原始大小）。不必擔心其他3個影像的背景關鍵影格。我只需要有關標題居中以及紅色和藍色藥丸圖像的幫助。我嘗試使用線上程式碼，但仍然遇到相同的錯誤。我嘗試過將圖像調整為不同的尺寸，並嘗試過

P粉649990163 · Answer

我對您的目標有所猜測，但是您不需要居中對齊映像容器嗎？我已在 #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;
}


  
  
  
  
  
  Hello, world!



  
    Pills

需要協助將內容居中並使圖像連結可點擊

全部回覆(1)我來回復