Ik ben weer terug met een aantal goede snippet op "het plaatsen van een Play Icoon op de afbeelding met behulp van CSS", Na het doorlopen van dit artikel kunnen jullie gemakkelijk leren over hoe we een Play kunnen plaatsen icoon (niets anders dan een pictogram .gif of .png-pictogram) op een plaatje. In sommige scenario's die je zou kunnen tegenkomen op het plaatsen van het betreffende spel icoon over respectieve het videobeeld
Bijvoorbeeld:. Als jullie kijken naar mijn site die 'developersnippets.
com', naar rechts ziet u sommige videoverbindingen in paragraaf "Video's waar je kunt leren", in dit gedeelte en zo goed als in het volledige artikel pagina kunt u een aantal video banden die wijzen op "TechVideoBytes" bekijken, als je kijkt die foto's kun je een 'play bekijken icoon "op deze respectieve beelden toch? Gewoon ik een afbeelding ".gif" hebben geplaatst over het videobeeld met behulp van CSS. Check hoe ik dit met behulp van CSS geplaatst.
DEMO & DOWNLOAD Alvorens in te gaan om een blik op de HTML en CSS-code, kunt u gewoon een kijkje nemen bij de uitgang en als u wilt dezelfde downloaden dan doe je het same.Click hier voor live demo | Klik hier om de code
downloaden
HTML Hieronder is de HTML-code, waar u kunt kopiëren en plakken in een tag
12345
CSS Hieronder is de CSS-code, aan de respectieve play pictogram over te plaatsen een afbeelding, kopieer de onderstaande CSS-code en plak het zelfde in uw respectieve stijl sheet.
123456789101112131415161718192021222324252627282930313233343536373839404142434445.video-dev {Cursor: pointer; position: relative; background: url (rockingvideo.jpg) no-repeat center; width: 111px; height: 157px; left: 0px; top: 0px;} .Video-a-koppeling {position: relative;} a {color: # 0E58A0; width: 111px; height: 157px; left: 0px; top: 0px; display: block;} .Video-dev .Video-koppeling 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; vertical-align: bottom; width: 34px; ondoorzichtigheid: 0,8; left: 38px; top: 68px;} .container-border {border: 1px solid #CCCCCC; padding: 3px; width: 111px; height: 157px; margin-top: 5px; margin-right: 1px; float: left;}
Pas de Code: 1. Wijzig de bestandsnaam en het pad die ik gebruik en plaats uw pad en de bestandsnaam daarvan zo nodig is.
2.
Hieronder is de bestandsnaam voor de 'play icoon', zo verander