Wenn Sie eine Webseite besuchen , werden Sie wahrscheinlich auf eine Reihe von verschiedenen Effekten . Viele Effekte , wie Fading , werden mit einer Kombination von Technologien erfolgen . Dies bedeutet nicht, dass sie kompliziert zu produzieren , aber sie tun Gebrauch mehr als nur gerade HTML -Code, um den gewünschten Effekt . HTML
HTML steht für Hyper Text Markup Language. Es ist die Sprache des Web. Seine primäre Funktion ist es, Web -Seite Struktur erstellen. Die Effekte und Animationen im Web enthalten sind nicht mit HTML erstellt . HTML bildet den Rahmen für die Effekte . Es bestimmt, wo bestimmte Elemente im Browser angezeigt wird . Sie können eine komplette Web -Seite in HTML zu bauen, aber Sie möchten kreativ begrenzt werden. HTML ist in erster Linie für Struktur verwendet und das Hinzufügen von Text , andere Funktionalität wird mit Skriptsprachen und Animations-Software hinzugefügt
CSS
CSS steht für Cascading Style Sheet . . Die Elemente auf einer Webseite mit CSS gestylt. CSS ermöglicht ein Programmierer , um einen Stil für ein bestimmtes Element zu diktieren , dann benutzen Sie ihn in eine Website . Dies bedeutet, dass , wenn Sie alle Ihre Überschriften wollte mutig sein und blau, könnte man mit diesem Stil mit einer Zeile Code zu definieren, und es wäre zu jeder Seite der Website angewendet werden. Dies beseitigt die Notwendigkeit, neu zu kodieren . Mit HTML und CSS können Sie einen Fading-Effekt auf ein Bild hinzuzufügen innerhalb Ihrer Web -Seite.
Alpha
Die CSS alpha Filterwechsel ermöglicht es Ihnen, die Deckkraft des Bildes. Die Deckkraft bestimmt, wie das Bild auf dem Bildschirm angezeigt . Je niedriger die Deckkraft , erscheint das mehr verblasst das Bild . Erstellen Sie einen Fade ist das perfekte Beispiel dafür, wie HTML und CSS zusammenarbeiten. Sie verwenden HTML , um anzuzeigen , welches Bild auf dem Bildschirm und CSS zu platzieren , um das Bild auf die entsprechende Transparenz ausblenden .
< Img src = " myImage.jpg " width = " 150 " height = "150" alt = " MyImage " style = " opacity: 0.4 ; filter : alpha ( Opazität = 40 ) " />
die Codezeile oben nimmt eine Bilddatei namens " MyImage " und reduziert die Deckkraft auf 40 Prozent . Das Bild wird über einen Fade ein wenig mehr als die Hälfte , wenn der Browser zeigt es .
Verwendet
Der Fade-Effekt kann ein paar verschiedene Möglichkeiten genutzt werden. Sie können eine verblasste Bild als Hintergrund für Ihre gesamte Web -Seite verwenden oder eine transparente Box auf ein Bild , um den Text besser lesbar. Deckkraft kann geändert werden, wenn der Website-Besucher löst ein Ereignis werden. Als Beispiel können Sie ein Bild zu einer Opazität von 40 verblassen , wenn der Benutzer mit der Maus oben drauf , dann bringen Sie es wieder auf 100 , sobald die Maus das Bild verlässt . Dieser Effekt ist nützlich, wenn Sie angeben , dass der Benutzer " ausgewählt " ein bestimmtes Bild wollen . Ein Beispiel für diese Art des Effekts können unten gefunden werden
< img src = " myImage.jpg " style = " opacity: 1 ; filter : alpha ( Opazität = 100) " . />