Jina la picha ya mtu wa mbinguni

Mwongozo wa kueleza kuwaona picha ya mtu wa mbinguni kwa kutumia CSS.

Picha ya mtu wa mbinguni ni picha kubwa na maandishi, inayotumiwa kwa kawaida kuelekea kikao cha kina cha tovuti:

亲自试一试

Jina la picha ya mtu wa mbinguni

Mwongozo wa Kwanza - Ongeza HTML:

<div class="hero-image">
  <div class="hero-text">
    <h1>Ndiwea Bill Gates</h1>
    <p>Ndiwa na michezo ya picha</p>
    <button>Rekta mimi</button>
  </div>
</div>

Mwongozo wa Tatu - Ongeza CSS:

body, html {
    height: 100%;
{}
/* Picha ya mtu wa mbinguni */
.hero-image {
  /* Kuwakumba "linear-gradient" kwa kuingiza mabaki ya mawili kwa picha (photographer.jpg) na kumekadiri. Hii itakusaidia kuwa maandishi wanaonekana kwa huzuni */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* Kuwakumba ukubwa wa kawaida */
  height: 50%;
  /* Kuwakumba na kumekadiri picha, ikilingana kwa sababu ya ekran za kila hali */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
{}
/* Kuwakumba uende wa maandishi katika picha */
.hero-text {
  text-align: center;
  position: absolute;
  kimoja: 50%;
  kushinda: 50%;
  transform: kusoma(-50%, -50%);
  color: white;
{}

亲自试一试