Bună, băieți, Bine ați venit pe blogul nostru, în blogul de astăzi vom vedea cum să creăm un Video de fundal textîn HTML și CSS.

De multe ori dăm titlul suprapunerii video și redarea video în fundal și textul apare pe videoclip, așa că creăm acest text peste videoclip folosind HTML și CSS.

Deci, să începem proiectul nostru text peste video prin adăugarea codurilor sursă. Pentru asta, în primul rând, folosim codul HTML.

COD HTML pentru text peste video

<video playsinline autoplay muted loop>
     <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  	<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video">
    Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<header>
  <nav>
    
    <a href="#">Shop</a>
    <a href="#">Stores</a>
    <a href="#">Products</a>
  </nav>  
</header>
<div class="overlay">
  <h2>Meet the crazy-smart women we asked.</h2>
</div>

Acum, în acest cod, adăugăm videoclipul ca fundal folosind eticheta video și atributele sale, apoi deschidem antetul și eticheta de navigare, iar în interiorul acestora, adăugăm anumite link-uri folosind eticheta de ancorare care este folosită ca navigare. link-uri.

După aceea, închidem eticheta de navigare și antet și apoi adăugăm partea majoră care este text folosind h2 în interiorul clasei div.

Deci, acum facem textul să-l suprapună în fundalul video folosind codul CSS dat.

COD CSS pentru text peste video

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900);
* {
  box-sizing: border-box;
}
body {
    font-family: "Lato","Avenir Next",Arial,sans-serif;
  margin: 0;
  background: #000;
  background-size: cover;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.overlay {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.overlay h2 {
    background: #000 none repeat scroll 0 0;
    color: tan;
    font-weight: 600;
    margin: 2rem 3rem 0;
    mix-blend-mode: overlay;
    padding: 5px 15px;
    text-align: center;
}
header {
    background:tan;
    position: fixed;
    width: 100%;
    text-align: center;
    color: white;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 0.5em;
}
nav a {
    color: inherit;
    padding: 0 12px;
    text-decoration: none;
}

Permiteți-mi să explic acest cod în pași pentru a-l înțelege cu ușurință. Deci, să începem.

PASUL 1:În primul pas, importăm fonturile folosind proprietatea de import și apoi adăugăm fundalul, marginea și familia de fonturi pentru a crea fonturi elegante, aliniamente adecvate și fundaluri atractive.

Apoi, adăugăm doar lățimea, înălțimea, partea de sus și stânga pentru aliniere, apoi fixăm poziția pentru valoarea absolută, în sfârșit, adăugăm proprietățile obiectului care fac utilizatorul video interactiv și susținător.

Codul pentru explicația de mai sus.

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900);
* {
  box-sizing: border-box;
}
body {
    font-family: "Lato","Avenir Next",Arial,sans-serif;
  margin: 0;
  background: #000;
  background-size: cover;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

PASUL 2:În al doilea pas, facem alinierea textului pentru centru și adăugăm un fundal care este transparent și adăugăm culoarea textului, făcându-l să evidențiem un cuvânt care este suprapus de fundalul video. Unele valori, cum ar fi kit web, conținut justificat pentru a-l alinia la centru și pentru a-l fixa cu fundalul.

Acum am început să stilăm cuvântul pentru suprapunerea pe el adăugând fundal, culoarea fontului, greutatea, marginea și modul de amestecare, astfel încât suprapunerea textului să fie implementată. Adăugați valoare conform cerințelor noastre.

.overlay {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.overlay h2 {
    background: #000 none repeat scroll 0 0;
    color: tan;
    font-weight: 600;
    margin: 2rem 3rem 0;
    mix-blend-mode: overlay;
    padding: 5px 15px;
    text-align: center;
}

PASUL 3:În acest ultim pas, stilăm barele de navigare adăugând fundaluri și aliniindu-le la centru, apoi creând culori atractive pentru fonturi cu dimensiuni. Codul pentru explicație este în jos.

header {
    background:tan;
    position: fixed;
    width: 100%;
    text-align: center;
    color: white;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 0.5em;
}
nav a {
    color: inherit;
    padding: 0 12px;
    text-decoration: none;
}

Acum am adăugat cu succes codul sursă pentru proiect. Deci acum putem vizualiza proiectul în secțiunea de ieșire dată.

Acum am creat cu succes „Text Overlay Video” folosind HTML și CSS. Puteți utiliza acest proiect pentru nevoile dvs. de personal, iar liniile de cod respective sunt date cu link-ul stiloului de cod menționat mai jos.

Dacă descoperiți că acest blog este util, atunci asigurați-vă că căutați cod aleatoriu pe google pentru proiecte front-end cu coduri sursă și asigurați-vă că urmați codul cu pagina de Instagram aleatorie.

COD DE REFERINȚĂ —Transmite cod

Scris de —Ragunathan S

Ce editor de cod folosiți pentru această suprapunere de text pe codare video?

Recomand personal să utilizați VS Code Studio, este simplu și ușor de utilizat.

Acest proiect este receptiv sau nu?

DA! acesta este un proiect receptiv

Folosiți linkuri externe pentru a crea acest proiect?

No!