Perlukan bantuan untuk memusatkan kandungan dan menjadikan pautan imej boleh diklik

Question

Pada asasnya, saya memerlukan imej dan tajuk untuk dipusatkan pada skrin, tetapi saya juga memerlukan imej itu boleh diklik dan membuka pautan. Saya percaya saya mempunyai kod yang betul untuk melakukan ini, tetapi saya masih menghadapi dua isu ini. Imej juga datang dalam dua saiz yang berbeza, jadi ia juga menyukarkan. Saya hanya cuba menjadikan pil merah lebih kecil dan pil biru lebih besar (berbanding dengan saiz asalnya). Jangan risau tentang bingkai kekunci latar belakang untuk 3 imej yang lain. Saya cuma perlukan bantuan untuk memusatkan tajuk dan imej pil merah dan biru. Saya cuba menggunakan kod dalam talian tetapi masih mendapat ralat yang sama. Saya telah cuba mengubah saiz imej kepada saiz yang berbeza, cuba

P粉649990163 · Answer

Saya sudah meneka matlamat anda, tetapi tidakkah anda perlu menjajarkan bekas imej di tengah? Saya telah melakukan ini pada pemilih #background.

Saya kemudian mengalihkan tanggungjawab ubah saiz ke sauh dan menetapkan sifat paparannya kepada inline-block. Ini memaksa mereka untuk mengandungi imej sepenuhnya (lihat Mengapa tag anchor tidak mengambil ketinggian dan lebar elemen yang mengandunginya). Saya juga menetapkan lebar maksimum imej kepada 100%. Ini semua dilakukan dalam CSS kerana gaya sebaris tidak cekap dan harus dielakkan.

Saiz imej berbeza-beza. Anda boleh mengendalikan ini dalam beberapa cara menggunakan CSS, tetapi penyelesaian terbaik ialah mengubah saiznya supaya sepadan. Saya akan mengurangkan saiz yang lebih besar kepada saiz yang sama dengan yang lebih kecil.

FYI, elemen gaya anda berada di luar elemen kepala dan badan. Ini HTML tidak sah. Letakkannya di dalam elemen kepala.

Selain itu, elemen tengah sudah lama ditamatkan dan tidak boleh digunakan.

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