Vaizdo įrašo perkėlimas virš vaizdo HTML ir CSS

Įvadas

Šiame straipsnyje bus aptariama, kaip perkelti elementą, ypač vaizdo įrašą, virš kito elemento, pvz., vaizdo, naudojant HTML ir CSS. Ši technika dažnai naudojama kuriant interneto svetaines su perdengimu, antraštėmis ar kita interaktyvia grafika.

Pagrindinė HTML struktūra

Pirmiausia mums reikia pagrindinės HTML struktūros. Turi būti du elementai: pagrindinis vaizdas ir vaizdo įrašas, kuris bus perkeltas virš jo.

<div class="container"> <img src="image.jpg" alt="Pagrindinis vaizdas"> <video src="video.mp4" controls></video></div>

Čia „container“ klasė naudojama abiem elementams apvynioti. „img“ žymė rodo pagrindinį vaizdą, o „video“ žymė įterpia vaizdo įrašą su valdikliais.

CSS pozicionavimas

CSS pozicionavimas yra raktas norint perkelti vaizdo įrašą virš vaizdo. Tai galima pasiekti naudojant „position“ savybę.

.container { position: relative; width: 500px; /* Nustatykite konteinerio plotį */ height: 300px; /* Nustatykite konteinerio aukštį */}.container img { width: 100%; height: 100%; object-fit: cover;}.container video { position: absolute; top: 10px; left: 10px; width: 200px; z-index: 1; /* Užtikrina, kad vaizdo įrašas būtų virš vaizdo */}

Štai kaip tai veikia:

Taip pat skaitykite: Pilnas žodynas žemaičių kalba

  • position: relative;: nustatytas konteinerio elementui. Tai leidžia vaizdo įrašui būti pozicionuojamam absoliučiai jo atžvilgiu.
  • position: absolute;: nustatytas vaizdo įrašo elementui. Tai pašalina vaizdo įrašą iš įprasto srauto ir leidžia jį pozicionuoti naudojant „top“, „left“, „right“ ir „bottom“ savybes.
  • top: 10px; left: 10px;: tai nustato vaizdo įrašo viršutinio kairiojo kampo atstumą nuo konteinerio viršutinio kairiojo kampo.
  • width: 200px;: nustato vaizdo įrašo plotį.
  • z-index: 1;: tai užtikrina, kad vaizdo įrašas būtų virš vaizdo. Elementai su didesne „z-index“ verte yra virš elementų su mažesne verte.

Papildomi stiliai

Galite pridėti daugiau stiliaus, kad pagerintumėte išvaizdą. Pavyzdžiui, galite pridėti šešėlį vaizdo įrašui arba suapvalinti jo kraštus.

.container video { position: absolute; top: 10px; left: 10px; width: 200px; z-index: 1; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Prideda šešėlį */ border-radius: 5px; /* Suapvalina kraštus */}

Atsakingas dizainas

Norint, kad dizainas būtų atsakingas, turite atsižvelgti į skirtingus ekrano dydžius. Tai galima pasiekti naudojant medijos užklausas.

@media (max-width: 600px) { .container { width: 100%; height: auto; } .container video { width: 50%; top: 5%; left: 5%; }}

Ši medijos užklausa taikoma stiliams, kai ekrano plotis yra mažesnis nei 600 pikselių. Konteinerio plotis nustatytas į 100%, o aukštis nustatytas į automatinį. Vaizdo įrašo plotis nustatytas į 50%, o viršutinis ir kairysis atstumai nustatyti į 5%.

Taip pat skaitykite: Makaronai: mitai ir faktai

Taip pat skaitykite: Nuo plokštelės iki omleto

tags: #zodzio #kelimas #virs #paveikslelio #html #css

Populiarūs įrašai: