Jag är tillbaka igen med några bra utdrag på "placera en Play ikon över bilden med hjälp av CSS", Efter att ha gått igenom den här artikeln ni kan lära enkelt på hur vi kan placera en Play Icon (ingenting annat än en .gif ikon eller .png ikon) över en bild. I vissa scenarier du kan ha kommit över på att placera respektive spelikonen över respektive videobilden Omdömen
Till exempel:. Om ni tittar på min webbplats som är "developersnippets.
com", mot höger kan du se vissa videolänkar i avsnitt som kallas "Video Var kan du lära dig", i detta avsnitt och liksom i hela artikel sida kan du se några videolänkar som pekar till "TechVideoBytes", om man ser dessa bilder kan du visa en "lek ikonen "på de respektive bilderna rätt? Bara jag har placerat en ".gif" bild över videobilden med hjälp av CSS. Kolla in hur jag har placerat detta med CSS. Omdömen
DEMO & DOWNLOAD Innan kommer att ha en blick på HTML och CSS-koden, kan du bara ta en titt på produktionen och om du vill ladda ner samma, då du gör same.
Click här för live-demo | Klicka här för att ladda koden Omdömen
HTML Nedan är HTML-koden, där du kan kopiera och klistra in den i en tagg Omdömen 12345
CSS Nedan visas CSS-kod, för att placera respektive spelikonen över en bild, bara kopiera nedanstående CSS-koden och klistra in på samma sätt i din respektive stil sheet.
123456789101112131415161718192021222324252627282930313233343536373839404142434445.video-dev {Cursor: pointer; positioner: relativ; bakgrund: url (rockingvideo.jpg) ingen upprepning center; width: 111px; height: 157px; vänster: 0px; top: 0px;} .
Video-a-link {läge: relativt;} en {color: # 0E58A0; width: 111px; height: 157px; vänster: 0px; top: 0px; display: block;} .Video-dev .Video-link-span {background: transparent url (play_icon.gif) no-repeat scroll 0pt 50%; cursor: pointer; color: # 000000; display: block; height: 35px; position: absolute; text-align: center; text-decoration: none; vertikal-align: bottom; width: 34px; opacitet: 0,8; vänster: 38px; top: 68px;} .container gränserna {kant: 1px #CCCCCC fast ämne; padding: 3px; width: 111px; height: 157px; margin-top: 5px; marginal höger: 1px; float: left;}
Anpassa kod: 1.
Ändra filnamnet och sökvägen som jag använder och sätta in din sökväg och filnamn i enlighet med behov. Omdömen
2. Nedan är filnamnet för "spelikonen", så ändrar det enligt dina krav, här kan du placera "gif" eller ".png" fil enligt din requirement.3. Vill placera visa denna sida vid sida sedan använda