Benötigen Sie Hilfe beim Zentrieren von Inhalten und beim Anklicken von Bildlinks?

Question

Im Wesentlichen muss das Bild und der Titel zentriert auf dem Bildschirm angezeigt werden, aber ich muss auch darauf achten, dass das Bild anklickbar ist und der Link geöffnet werden kann. Ich glaube, ich habe den richtigen Code dafür, aber ich habe immer noch diese beiden Probleme. Außerdem gibt es die Bilder in zwei unterschiedlichen Größen, was es ebenfalls schwierig macht. Ich habe gerade versucht, die roten Pillen kleiner und die blauen Pillen größer zu machen (im Verhältnis zu ihrer Originalgröße). Machen Sie sich keine Sorgen über die Hintergrund-Keyframes für die anderen drei Bilder. Ich brauche nur Hilfe beim Zentrieren des Titels und der roten und blauen Pillenbilder. Ich habe versucht, den Online-Code zu verwenden, erhalte aber immer noch die gleiche Fehlermeldung. Ich habe versucht, die Größe des Bildes auf verschiedene Größen zu ändern, habe es versucht

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

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial