Eines der Dinge, die ich am häufigsten von Leuten gefragt, versuchen, HTML und CSS zu meistern ist: „Wie kann ich ein Hintergrundbild anklickbar machen?“ Es ist einfach einen regulären Bild-Tag in einem Link zu wickeln, aber was, wenn Ihr Design oder Situation erforderlich, dass Sie verwenden ein Hintergrundbild? Es ist eigentlich ganz einfach. Befolgen Sie einfach diese Schritte und ich werde Ihnen zeigen, wie eine anklickbare Hintergrundbild wie folgt zu machen:
Beginnen Sie mit nur einem Link genau, wie Sie es für andere Zwecke machen würde, und stellen Sie sicher, dass der Link auf eine ID zu geben, damit wir, dass unsere Stile anwenden können:
Das ist alles, die (X) HTML Sie Ihr Hintergrundbild anklickbar machen müssen. Bereich Web-Entwicklung: Ihr Link sollte in etwa so aussehen
Also, wie können wir ein Hintergrundbild machen einen klickbaren Link? Es stellt sich heraus, kann es mit einem cleveren Trick CSS erfolgen. Lassen Sie uns, indem Sie die Hintergrundbild loszulegen und die Verbindung machen die gleiche Größe wie das Bild (so kann man das ganze Bild sehen). Da ein Anker-Tag kein Block-Level-Element ist, müssen wir es zwingen, als „Block“ angezeigt werden, so dass wir die Größe angeben:
An diesem Punkt sollte es in etwa so aussehen: Bereich Web-Entwicklung
Jetzt müssen wir tun müssen, ist, den Text zu verbergen. Dies kann durch „text-indent“ getan und Einrücken den Text vollständig aus dem Bildschirm wie folgt aus:
Und das fertige Produkt sieht wie folgt aus: Bereich Web-Entwicklung
Ich bin mit Wordpress und ich bin sehr verwirrt darüber, wo die HTML zu setzen. Muss ich den HTML-Code in index.php oder in header.php setzen?
Sie erklären, alle anderen Schritte sehr gut, aber sie hat mich verlassen auf der HTML-Teil sehr verwirrt. Ich habe andere Tutorials nachgeschlagen, die beschreiben, wie dies zu tun, aber sie scheinen alle davon ausgehen, dass Sie wissen, welche Datei für die html zu bearbeiten. So fehle ich wahrscheinlich etwas wirklich offensichtlich, aber ich würde wirklich eine Erklärung zu schätzen wissen, wo den HTML-Code zu setzen.
gültig Text in den ALT-Parametern des HREF-Tages dieses potentielle Problem würde korrigieren Glauben Sie, dass das Hinzufügen von?
Ansonsten guter Tipp, Aaron. Vielen Dank!
Der Grund, dass habe mich nicht beantworten, weil es ist nicht wirklich eine Frage mit einer „richtigen Antwort“. Die „Experten“ da draußen eher ablehnen, die jeweils ihre eigene Meinung zu haben. Wir * wissen *, dass Google (und wahrscheinlich auch andere Suchmaschinen) wissen nicht, wie Sie versuchen, etwas anderes zu, um sie anzuzeigen, als Sie Ihre Benutzer angezeigt werden soll. Wenn Sie jedoch wurden ein reguläres Bild verknüpft würden Sie alt-Text im Bild-Tag. Dies gibt Ihnen genau die gleiche Fähigkeit, aber mit einem Hintergrundbild.
Am Ende bin ich darüber keine Sorgen. Ich benutze es an mehreren Stellen und haben keine Bestrafungen bemerkt. Allerdings, wenn es Ihnen Sorgen ... nicht verwenden.
Und noch ist mein Hintergrundbild nicht verbunden. Was mache ich falsch? WAAAAAH!
Zwei Dinge: 1) Sie klingen Art whiney. Ich habe eine 6-jährige, der genug davon hat # 128521; 2) Wenn Sie wollen, dass es funktioniert, die Anweisungen in diesem Artikel folgen. Ihre HTML und CSS aussehen nichts, was ich hier habe.
Ich versuche, eine vorhandene Blog-Vorlage (handgloves, tatsächlich) zu bearbeiten, so dass ich das Kopieren in alles, was sie hatten, da es ein bisschen komplizierter als einfache HTML war. Da ich nicht CSS oder PHP beherrschen bin (natürlich) Ich habe versucht, so wenig von ihrem Code wie möglich zu löschen. Ich habe in den „display: block“ und bezeichnet die Höhe / Breite und schuf die „text-indent: 9999px“ wie Sie vorgeschlagen.
Ich verwenden, um dieses Bild in dem Hintergrund mit CSS zu setzen, aber das Bild wird nicht angezeigt. Dann legte ich den Hintergrund-Code in HTML und das Bild erscheint. Ich lege den Hintergrund Picute in oben in der Mitte, und ich mag den Link auch in diese Position bewegen, aber nicht wissen, wie. Bitte Welche CSS-Regel angewendet werden sollte?
Ich habe Ihre Vorschläge versucht, aber ich habe mit leeren Händen kommen. Wenn ich den Link zu der Seite hinzufügen, zeigt der Link, aber ist nicht anklickbar. Selbst wenn ich Anzeige der vorgeschlagene Styling für das Hintergrundbild in der CSS alles zeigt in Ordnung, aber das Bild ist nicht anklickbar.
Dies wird auf einem Wordpress-Theme in der Seitenvorlage verwendet. Danke noch einmal. Tim
Sie scheinen ein Problem zu haben, weil der Link sonst eigentlich UNDER alles ist, was es unclickable macht. Sie können entweder den Link zum Ende Ihres HTML bewegen (kurz vor dem
Tag), oder fügen Sie diese in die #demo CSS:
z-Index: 10;
Dies ist die CSS-I verwendet. Ich legte es zuletzt in der CSS-Datei und zeigt das Bild, aber es ist nicht anklickbar.
Wie Sie werden bemerken, bin ich die Anwendung der CSS auf den tatsächlichen Link, kein Container um den Link. Versuchen Sie „# menu-item-51“ bis „# Menüpunkt-51 a“ und es sollte funktionieren zu ändern.
Hat jemand versucht, dies mit einem Überroll Hintergrund zu tun?
Wie in einem Knopf (60 Pixel hoch, mit einem nicht-Schwebe- und schweben obere und untere Hälfte) gestylt wie folgt:
Ich habe versucht, ein paar Dinge auf meinem Desktop
Was Antonio fragte Ich habe gelesen und wieder gelesen und versucht und versucht und jetzt ich brauche Hilfe bitte. Gibt es trotzdem, um den Körper Hintergrund anklickbar zu machen. Ich habe meine CSS unten hinzugefügt.
Danke und hoffen, dass die Feiertage gut gegangen.
Ups wurde der HTML-Code gelöscht, musste ich die Klammern ändern mit ^:
Oh mein Gott! Ich liebe dich! Früher habe ich den zweiten Teil unter meinem Körperelement und änderte den ID-Wahlschalter auf „background-Link“. Versucht, es für Kinder ab, um herauszufinden. Im Ernst, ich liebe dich.
Dah! Ich sprach zu früh. Der verlinkte Hintergrund sitzt unter meinem Container statt dahinter, das heißt, Sie nach unten vorbei an all den Inhalt blättern müssen, um den verknüpften Hintergrund zu erhalten. Irgendwelche Vorschläge?
ps - ich habe nicht die Texteinrückung enthalten, weil es meine ganze Header aus irgendeinem Grund verschwinden lässt.
Ich weiß, dass dieses Beispiel ist das Hintergrundbild ohne den Text sichtbar zu haben.
Ich möchte der beste Weg, wissen, um tatsächlich Text anzuzeigen, genau innerhalb des div-Block positioniert. Ich habe mit Polsterung versucht, aber das erweitert den Begrenzungsrahmen des div und den klickbaren Bereich. Ich spielte auch mit text-indent und line-height aber sie haben nicht wirklich gerecht wird.
Ich habe versucht, tatsächlich den Text in einem anderen div setzen und positioniert sie entsprechend und, obwohl dies nicht W3C-konform ist, es bestanden Validierung und funktioniert in allen Browsern.
Was sind deine Gedanken?
Ich bitte um Verzeihung, es hat die Überprüfung nicht bestanden, aber sehr gut funktioniert. Allerdings würde ich eher gültigen Code verwenden.
Wenn Sie mit line-height spielen für oben und unten, und Polsterung für links und rechts können Sie bekommen, was Sie wollen Ausrichtung. Denken Sie daran, dass, wenn Sie links / rechts padding fügen Sie, dass von der Breite abziehen müssen.
Thx für die Antwort Aaron. Natürlich kann die Breite / Höhe die Größe des Bildes entsprechend eingestellt werden. Duh.
Wenn ich zwei unterschiedlich formatierte Textblocks innerhalb derselben div verwenden wollte, ist es eine Möglichkeit, dies zu tun?
Pexsol Interactive sagt:
Warum nicht so etwas wie verwenden? In der CSS definiert style = cursor: pointer und auf dem DIV ein Onclick-Ereignis hinzuzufügen.
Hallo, CSS-Neuling hier.
html background: url (wp-content / plugins / under / kyrkahome.png) no-repeat mitte befestigt ist; -Webkit-Hintergrund-size: Abdeckung; -moz-Hintergrund-size: Abdeckung; -o-Hintergrund-size: Abdeckung; Hintergrund-size: Abdeckung;
Warum gibt es soooo viele Seiten, wie diese, Littering im Web. Sie können eine Seite nicht machen, die richtig angezeigt wird,
noch darauf bestehen, raten auf austeilte zu anderen auf, wie es geht.
Vielen Dank für den Hinweis mich in die richtige Richtung # 128578; Ich wusste nicht, wie die gepunktete Umrisslinie, die aufgrund des Eindrucks aus der Seite lief. So, hier ist meine überarbeitete Version von dem, was Ihr Trick.
Hier ist, was ich getan habe ...
Ich implementiert diese als eine Klasse in dem Link:
Legen Sie die oben, wo Sie wollen das Logo einfügen oder auch ein beliebiges Bild, wirklich.
Ich benutzte style =“color: transparent;“ (Ansonsten ist der Link zeigen.)
Ich verwendete Text-align: center; (Im Fall, dass Sie es vorziehen, den Link auf das Bild, um zu zeigen, Dies ist für mich nützlich ist, wie ich es tun verwenden auf diese Weise manchmal ich nur den Inline-Farb entfernen:... Transparent, in diesem Fall)
Breite und Höhe muss die genauen Abmessungen (in Pixel) des Bildes Sie verwenden übereinstimmen.
umreißen: none; ist die gepunktete Linie zu entfernen, die Links, wenn Sie auf sie umgibt.
Sie brauchen hier keine Text angeben, für diese zu arbeiten. In diesem Fall brauchen Sie nicht Farbe zu verwenden: transparent; in dem
Ich denke, von Text nicht verwenden oder einen Link zwischen Suchmaschinen könnte nicht indizieren? Ich weiß es nicht wirklich.
Ich hoffe, das jemand hilft.
Hoppla, ich habe vergessen, die Code-Tags.
Vielen Dank für den Hinweis mich in die richtige Richtung # 128578; Ich wusste nicht, wie die gepunktete Umrisslinie, die aufgrund des Eindrucks aus der Seite lief. So, hier ist meine überarbeitete Version von dem, was Ihr Trick.
Hier ist, was ich getan habe ...
Ich implementiert diese als eine Klasse in dem Link:
Legen Sie die oben, wo Sie wollen das Logo einfügen oder auch ein beliebiges Bild, wirklich.
Ich benutzte style =“color: transparent;“ (Ansonsten ist der Link zeigen.)
Ich verwendete Text-align: center; (Im Fall, dass Sie es vorziehen, den Link auf das Bild, um zu zeigen, Dies ist für mich nützlich ist, wie ich es tun verwenden auf diese Weise manchmal ich nur den Inline-Farb entfernen:... Transparent, in diesem Fall)
Breite und Höhe muss die genauen Abmessungen (in Pixel) des Bildes Sie verwenden übereinstimmen.
umreißen: none; ist die gepunktete Linie zu entfernen, die Links, wenn Sie auf sie umgibt.
Sie brauchen hier keine Text angeben, für diese zu arbeiten. In diesem Fall brauchen Sie nicht Farbe zu verwenden: transparent; in dem
Ich denke, von Text nicht verwenden oder einen Link zwischen Suchmaschinen könnte nicht indizieren? Ich weiß es nicht wirklich.
Ich hoffe, das jemand hilft.
Vielen Dank für bemerken, dass! Es scheint, dass, wenn ich Domänen bewegt, dass Bild in der shuffle verloren gegangen. Es wurde restauriert und soll nun korrekt aussehen.
Iliia Shterev sagt:
Nizza Trick Aaron - vielen Dank! Pleace hilft mir bei meinem Problem.
Ich dot will von Text loszuwerden. In der Tat muss ich es ordentlich über ein Bild gelegt, das wie ein Geschäft Wagentaste aussieht. Ich mag dynamischer Text für die Ex sagen. „3 Produkte im Warenkorb“. Ich bin ein erfahrener ASP.NET Entwickler, so die Anzahl der Produkte von DB ziehen ist kein Problem für mich. Aber ich bin nicht sehr CSS geneigt und poliert.
Bisher habe ich entfernt text-indent: -9999px;
und um den Text zu platzieren, wo ich brauche es mir verwenden
padding: 10px 0px 0px 12px;
Mit freundlichen Grüßen aus Bulgarien.
Chargeful Chap sagt:
Hallo, ich verwendet diesen Code auf der Grundlage Ihrer
es owrks groß, aber wenn Sie Hintergrundbild Eigenschaft im BODY-Tag dann mein Banner wird positioniert in absoluten oben links auf der Seite (keinen Leerraum), aber mit Ihrer Methode Theres weißen Bereich am oberen linken Ecke des Bildes festgelegt. SO wie positioniere ich es absolut top ohne Lücken.
Aaron, ich kam gerade mit einer anderen Lösung als Ihr auf. Hoffe das hilft.
Danke dafür. EXACT Lösung, die ich brauchte. Große Lektion. Wirklich zu schätzen, dass Sie mir geholfen.