CSS Trick Drehen ein Hintergrundbild in einen klickbaren Link - Take 2
Meine bisherige Lösung dieses Problem wurde auf Phark der „Erreichbare Image Replacement“ Technik gebaut. Es funktioniert, indem Sie den Text wirklich weit nach links schieben (9.999 Punkte), die dafür sorgt, dass es da ist für Screenreader aber von den Benutzern verborgen (es sei denn, jemand über ein Display, das fast 10.000 Pixel auf der linken Seite des Behälters in Frage zu zeigen Lage ist). Das Problem scheint zu sein, dass einige Browser, wie das auf dem iPad, eine 9,999px Box machen, auch wenn es nicht sichtbar ist. Dies beeinflusst die Leistung, vor allem für Animationen.
Nun, es gibt einen besseren Weg. Es funktioniert ähnlich, aber anstatt den Textinhalt so weit nach links drängen, dass wir sicher sind, dass es außerhalb des sichtbaren Bereichs ist, wir schieben etwas außerhalb der Box auf der rechten Seite. Der Vorteil ist, dass auch ohne zu wissen, wie lange der Text ist, wissen wir genau, wie weit es zu schieben, um sicherzustellen, dass es vollständig aus dem Kasten heraus. Also, wenn Sie fragen: „Wie kann ich ein Hintergrundbild anklickbar machen?“ Das ist die neue Antwort. Es ist einfach, folgen Sie einfach diesen Schritten 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 mit „text-indent“ getan werden, um den Text direkt vor dem Aufnahmekasten einrücken, „white-space“ gesetzt mit dem Text zu halten, um nowrap zurück in die Box Verpackung, und mit „Überlauf“ Inhalt außerhalb der verstecken Feld wie folgt aus:
Und das fertige Produkt sieht wie folgt aus: Bereich Web-Entwicklung
Aktualisieren:
Ich wurde gefragt, wie eine Grenze zu addieren. Hier ist es mit einer CSS-Grenze:
Das funktioniert natürlich, aber die Grenze ist zu nah für meinen Geschmack und das Hinzufügen Polsterung verursacht unser Bild deplatziert sein. Hier ist die Lösung:
Im Grunde genommen sind wir das Hinzufügen 5 Pixel Polsterung rundum, Neupositionierung des Hintergrundbildes von oben nach 5px in und nach links, dann das Hintergrundbild einstellen, um nicht zu wiederholen. Jetzt ist unsere Grenze sieht nett aus:
Bereich Web-Entwicklung
Als kurze Notiz, wenn Sie „Box-Sizing: border-box;“ verwenden Sie müssen die Breite und Höhe in der CSS anpassen die Breite / Höhe des Bildes und die Polsterung sein, also in diesem Fall 470px × 110px.
Dies wird einige großartige Ideen für ein verwandtes Thema bietet die ich habe, aber ich habe einen Vorschlag, den Link-Text in Bezug auf versteckte.
Statt den Text Art und Weise zur Seite zu bewegen, oder gar aus, warum nicht gesetzt nur die Schriftgröße auf 0px? Getestet habe ich es mit Firebug auf genau dieser Seite, auf dem Schritt, in dem Sie den Text noch auf das Bild sichtbar zeigen. Es verschwindet ganz gut, und der Link funktioniert noch.
Die Leute können eine Mindestschriftgröße in ihren Browser so einstellen, die Ihre 0px Einstellung außer Kraft setzen wird. In FireFox, gehen Sie zu Einstellungen -> Inhalt -> Erweitert und Sie werden sehen, dass Sie die „Mindestschriftgröße“ ändern können.
Ich muss das meinem speziellen Code in WP anzuwenden. Die Kategorien zeigen in einem Widget mit dem Kategorienamen über den Daumen Bild für die vorgestellten Artikel dieser Kategorie, gefolgt von einem Auszug darunter. Ich brauche nicht den Text zu verschwinden, sondern brauche eine andere bg Bild für jede Kategorie aufgelistet haben, da es drei dieser Kategorien auf der Seite ist von links nach rechts. IDK jetzt die CSS zu tun, dass zu spezifizieren. Der Code sieht wie folgt für jede Kategorie Feld:
und Änderungen nur für die Daten-catid und tatsächlichen Namen.
Wie richte ich nur diesen Link für diese Kategorie, so dass es ein einzigartiges bg Bild hat? Ich weiß, es hat für den Behälter der Verbindung sein, die nur die h3 zu sein scheint. Unterhalb dieser span4 ist ein ul weitere Artikel in dieser Kategorie Auflistung, und nichts anderes. Irgendwelche Ideen?
Fast. Hier ist der HTML-minus der Öffnungswinkel Klammern:
Dies könnte eine lange gedreht, aber ich hoffe, Ihr könnt mir helfen! Ich versuche, deine Technik mit einem Vollbild-Hintergrundbild ... aber kein Glück zu implementieren. Können Sie sich an meinem Code peek und mir sagen, ob / wie es getan werden kann?
# Vollbild-Hintergrund-Bild z-index: -999;
min-height: 100%;
min-width: 1024px;
Breite: 100%;
Höhe: auto;
Position: fixed;
top: 0;
links: 0;
>
Vielen Dank im Voraus, wenn Sie irgendwelche Lösungen anbieten können! Ich habe jetzt 2 Tage lang daran gearbeitet, verschiedene Dinge auszuprobieren Ich finde online, aber nichts hat noch gearbeitet.
So versuche ich das klickbaren Hintergrundbild zu erhalten 4 separate Verbindungen zu haben.
HdrUserControl.acsx stellt die ids
Und dann ist die master.css wie folgt
div div # headerContainer
Position: relative;
padding: 10px 0 15px;
>
headerLinks
Position: absolute;
rechts: 0;
unten: 15 Pixel;
Leider, was Sie brauchen ziemlich verschieden sein wird von dem, was dieses Tutorial tut. Schauen Sie sich das Bild nach oben oder möglich zu brechen es auf einen Behälter setzen und dann Schichtung die Links über die Spitze (noch den text-indent mit dem Text von den Links zu verstecken)
James Meyer sagt: