CSS -Schaltfläche Bild

Wir werden CSS im Tastenelement der Hypertext -Markup -Sprache in diesem Artikel verwenden. Normalerweise ist das Standard -Taste -Element sehr einfach und hat kein Styling und keine Effekte darin. Mit Hilfe von CSS verwenden wir die verschiedenen Styling -Eigenschaften und fügen sie diesem Element hinzu. Diese Eigenschaften beziehen sich auf das Textstyling, die Größenanpassung, die Hintergrundfarben, die Animationseffekte und das Hinzufügen von Bildern. In diesem Artikel werden wir uns in erster Linie darauf konzentrieren, ein Bild zu einer Schaltflächeneigenschaft hinzuzufügen, die über CSS anwendbar ist. Um diesen Ansatz zu implementieren, werden wir das Notepad ++ verwenden, der uns bei der Bearbeitung unserer HTML -Datei hilft und sie auf unserem Browser testen wird.

Beispiel 01: Verwenden des CSS -Style -Tags, um ein Bild in einer Schaltfläche in einer HTML -Datei hinzuzufügen

In diesem Beispiel werden wir ein Bild in einer Schaltfläche mit dem CSS -Style -Tag im Dateiheader hinzufügen. Innerhalb des Style -Tags erstellen wir eine Klasse für die Schaltfläche, die später im Körper aufgerufen wird. Dann erstellen wir ein Skript, in dem wir mit der zuvor erwähnten Technik ein Bild zu einer Schaltfläche hinzufügen werden.

Im vorherigen Skript haben wir im Dateiheader ein Style -Tag geöffnet. In diesem Tag öffnen wir die Button -Class -Parameter, in denen wir mehrere Entwurfseigenschaften für das Element der Schaltfläche definieren werden. Zuerst fügen wir das Bild für den Hintergrund der Schaltfläche hinzu. Wir können das Bild über "URL" oder "SRC" hinzufügen. Dann fügen wir die Hintergrundgröße hinzu, die als "Cover" angegeben wird. Dann definieren wir auch die Breite und Höhe des Knopfes. Danach schließen wir das Style -Tag und bewegen uns zum Body -Tag. In diesem Tag fügen wir mit dem H1 -Tag eine Überschrift hinzu. Dann wird das Schaltflächen -Tag aufgerufen. In diesem Tag nennen wir die Styling -Klasse, die wir zuvor erstellt haben, um das gesamte Styling zu erben, das in der Klasse definiert ist. Dann schließen wir alle verbleibenden Tags und speichern die Datei im HTML -Format.

Wie wir in der vorherigen Ausgabe sehen können, wird das Bild zusammen mit der Überschrift als Schaltfläche auf der Seite unseres Browsers angezeigt. Dies rechtfertigt, dass der Styling -Kurs durch das Button -Tag erfolgreich geerbt wurde.

Beispiel 02: Hinzufügen eines Bildes in einer Schaltfläche mit einem Inline -CSS -Ansatz Hinzufügen

In diesem Fall werden wir mit dem Inline -CSS -Ansatz einer Schaltfläche ein Bild hinzufügen. Wir werden einem Standard -Schaltflächenelement der Hypertext -Markup -Sprache ein Bild hinzufügen, indem wir ihm die URL eines Bildes in dieser Methode geben. Lassen Sie uns nun einen Blick auf das Skript für diese Technik werfen.:

Im Bild des Bildes können wir sehen, dass der Dateikopf leer ist, da wir in diesem Beispiel den Inline -CSS -Ansatz verwenden werden. Wir öffnen unseren Button -Tag. Im Tag erwähnen wir die CSS, die die Schaltfläche in der Style -Eigenschaft haben soll. Wir erwähnen das gesamte Styling in dieser Eigenschaft und trennen sie mit Semikolonen. Wir fügen auch ein Bild mit dem Schlüsselwort des Hintergrundbildes hinzu und weisen ein Bild über URL zu. Dann ist das Taste -Tag zusammen mit dem Body -Tag geschlossen. Danach öffnen wir diese HTML -Datei in unserem Browser.

Die vorherige Ausgabe ist ein Beweis dafür, dass der Inline -Style -Tag -Ansatz ein Erfolg war. Wir können sehen, dass das Bild zur Schaltfläche hinzugefügt wird und die Standardtaste nun in ein Bild umgewandelt wird.

Beispiel 03: Verwenden der CSS -Style -Tags, um einer Schaltfläche ein Bild hinzuzufügen, wenn es übergeht

Wir werden einer Schaltfläche ein Bild hinzufügen, die nur dann angezeigt wird, wenn die Schaltfläche in diesem Beispiel schwebt. Wir werden das Style Tag CSS verwenden, um eine Schaltfläche mit einem solchen Verhalten in einer HTML -Datei bereitzustellen. Wir erstellen eine separate Klasse, um dieses Styling für ein bestimmtes Element in diesem Beispiel zu trennen. Um dieses Ziel zu erreichen, sollten wir das folgende Skript schreiben:

Im vorherigen Skript haben wir unser Head -Tag für die HTML -Datei geöffnet. In diesem Tag wird das Styling der Schaltfläche definiert, indem eine Klasse für das Button -Element geöffnet wird. In dieser Klasse definieren wir zuerst die Breite und die Höhe des Knopfes. Dann fügen wir eine Eigenschaft hinzu, die den Cursor in einen Zeiger verwandelt, und wir geben dem Text auch eine angemessene Größe. Dann fügen wir der Klasse eine ererbte Methode mit dem Namen "Schwebe" hinzu. In dieser Funktion fügen wir dem Hintergrund über URL ein Bild hinzu und weisen der Hintergrundgröße, die als „Cover“ bezeichnet wird, eine Eigenschaft zu, die eine Eigenschaft zuweisen, eine Eigenschaft zuzuweisen, die als „Cover“ bezeichnet wird.

Danach schließen wir alle Styling -Tags und bewegen uns zum Körper dieser Datei. Im Body -Tag fügen wir eine Überschrift mit dem H1 -Tag hinzu und das Schaltfläche wird nach dem Überschriften -Tag geöffnet. In der Schaltfläche nennen wir die Klasse, die wir im Style -Tag des Headers der Datei erstellt haben. Und dann schließen Sie den Knopf und den Körpermarke. Danach öffnen wir diese Datei in unserem Browser, um die folgende Ausgabe zu erhalten:

Die Ausgabe, die wir in dieser Datei sehen, ist das Ergebnis, nachdem die Schaltfläche verfolgt wurde. Wenn wir über die Schaltfläche schweben, wird das Bild, das wir im Stil Tag des Dateiheaders zugewiesen haben.

Beispiel 04: CSS -Style -Tag -Transformation einer Standard -Taste in ein Symbol für die nächste und vorherige Funktion

In diesem Beispiel werden wir die beiden Standardtasten der Hypertext -Markup -Sprache mithilfe des CSS -Style -Tags verwandeln. Wir werden die beiden Schaltflächen in diesem Beispiel in die nächste und vorherige Symbole verwandeln, indem wir ein Bild im Style -Tag hinzufügen. Wir sollten das folgende Skript schreiben, um dies zu tun:

Im vorherigen Skript fügen wir im Dateiheader ein Style -Tag hinzu. Dann erstellen wir zwei Klassen für die beiden Schaltflächen im Style -Tag. In diesen Klassen fügen wir beiden Schaltflächen ein Bild hinzu, wobei die Eigenschaft im Hintergrundbild und das URL -Format für das Bild verwendet werden. Nachdem wir beide Klassen mit ihren Eigenschaften zugewiesen haben, schließen wir den Stil und das Kopf -Tag und öffnen das Body -Tag, um den Inhalt für die Seite unseres Browsers zu erstellen. Erstens geben wir der Grenze mit Hilfe des H1 -Tags eine Überschrift, die eine in HTML definierte Überschriftengröße ist. Dann erstellen wir zwei Tasten. In beiden Schaltflächen weisen wir die im Style -Tag definierte relative Klasse zu. Danach schließen wir die Registerkarten und öffnen diese Datei nach dem Speichern in unserem Browser.

Die vorherige Ausgabe ist das Ergebnis unseres Skripts. Wie wir sehen können, sind beide Schaltflächen ausgerichtet und die Bilder aus den Stilklassen werden korrekt eingefügt. Jetzt werden die Standardschaltflächen für eine Webseite in die nächste und vorherige Symbole mit CSS verwandelt.

Abschluss

In diesem Artikel haben wir mehrere Beispiele für das Hinzufügen der Bilder zu einer Taste mit CSS besprochen. Wir haben das Inline -CSS- und Style -Tag -CSS verwendet, um die Bilder einer Standardschaltfläche in einer HTML -Datei hinzuzufügen. Wir haben mehrere Effekte auf eine Schaltfläche implementiert, um ein Bild wie den Schweberffekt oder den Hintergrund für den Abdeckungsstil hinzuzufügen, indem wir das Notepad ++ verwenden, um die HTML -Datei zu bearbeiten. Wir haben die verschiedenen Eigenschaften im CSS -Styling des Tastenelements verwendet, um sie in ein attraktives Attribut in unserer Webseite zu verwandeln.