Jeg er tilbage igen med nogle gode uddrag på "Placering af et Play ikon over billedet ved hjælp af CSS", efter at gå gennem denne artikel du fyre kan lære let om, hvordan vi kan placere en Play Ikon (intet andet end en .gif ikon eller .png ikon) over et billede. I nogle scenarier, du måske er stødt på på at placere det respektive spil ikon over den respektive videobilledet
For eksempel:. Hvis du fyre ser på min hjemmeside, der er 'developersnippets.
com «, mod din højre kan du se nogle video links i afsnittet "Videos hvor du kan lære", i dette afsnit, og såvel som i hele artiklen side kan du se nogle video links, som peger på "TechVideoBytes", hvis man ser de billeder, du kan se en "play ikon "på de respektive billeder ret? Blot har jeg placeret en ".gif" billede over videobilledet ved hjælp af CSS. Tjek hvor jeg har placeret dette ved hjælp af CSS.
DEMO & DOWNLOAD Inden vi går til at have et blik på HTML og CSS kode, kan du bare have et kig på outputtet, og hvis du ønsker at downloade den samme, så du gøre det same.
Click her for live demo | Klik her for at hente koden
HTML Nedenfor er HTML-koden, hvor du kan kopiere og indsætte den i et tag
12345
CSS Nedenfor er CSS kode, for at placere den respektive play ikon over et billede, bare kopiere nedenstående CSS kode og indsæt det samme i din respektive stil sheet.
123456789101112131415161718192021222324252627282930313233343536373839404142434445.video-dev {Cursor: pointer; position: relative; baggrund: url (rockingvideo.jpg) no-repeat center; bredde: 111px; højde: 157px; venstre: 0px; top: 0px;} .
Video-a-link {position: relative;} a {color: # 0E58A0; bredde: 111px; højde: 157px; venstre: 0px; top: 0px; display: block;} .Video-dev .Video-link-span {baggrund: transparent url (play_icon.gif) no-repeat scroll 0pt 50%; cursor: pointer; color: # 000000; display: block; højde: 35px; position: absolut; tekst-align: center; tekst-dekoration: ingen; lodret-align: bottom; bredde: 34px; opacitet: 0,8; venstre: 38px; top: 68px;} .container grænserne {border: 1px #CCCCCC solid; padding: 3px; bredde: 111px; højde: 157px; margin-top: 5px; margin-højre: 1px; flyde: venstre;}
Tilpas Kode: 1..
Ændre filnavnet og stien som jeg bruger, og indsætte dit stien og filnavnet i overensstemmelse hermed efter behov.
2. Nedenfor er filnavnet for 'play-ikon ", så ændre det, som pr dine krav, her kan du placere" .gif "eller" .png' fil som pr din requirement.3. Ønsker at placere vise de