h1#logo {
width: 200px; // width of image
height: 100px; // height of image
background: url(../path/to/image.jpg);
text-indent: -9999px;
}Diese Technik wird Mike Rundle zugeschrieben und als Phark-Methode bezeichnet. Es gibt viele weitere Techniken für CSS Image Replacement.
Ich liebe diese Technik, da sie keine Spans benötigt und perfekt funktioniert. Außerdem bewegt sich das Hintergrundbild in Firefox nicht, wenn man versucht, es auszuwählen, es sei denn, es ist ein Link, was gut ist.
Ich denke jedoch, dass CSS eine Art Text-Ersatz-Eigenschaft enthalten sollte, da dies immer noch eher ein Hack zu sein scheint.
Hallo,
Ich habe diese Technik verwendet, aber ich bemerkte ein kleines Problem in Google Chrome: Der text-indent ließ das Element um 9999px in die Breite wachsen. Daher musste ich "overflow: hidden" zum CSS hinzufügen.
Ich liebe diese Textersetzung, aber ich verwende immer gerne em anstelle von Pixeln, nur um sicherzustellen, dass sich dieser Text nicht in der Nähe des Fensters befindet, und ich stimme @mickey bezüglich overflow: hidden zu.
Warum nicht einfach einfaches HTML4 verwenden?
<img src="../path/to/image.jpg" width="200" height="100" alt="Bildersetzung">Keine komplizierten Hacks mehr. HTML4 ist großartig.
Ein Beispiel: Sie können den WordPress-Blogtitel (es ist normalerweise ein h1-Tag) mit Ihrem benutzerdefinierten Logo-Bild ändern, ohne PHP zu codieren. Auf andere Weise können Sie Ihr Logo für Screenreader ausblenden.
Ich liebe diese Technik, aber wenn jemand meine Website http://www.commercial-london-epc.co.uk/ auf einem Smartphone ansieht, überlagert der Text das Hintergrundbild. Ich frage mich, ob jemand dafür schon eine Lösung gefunden hat? Ein weiterer Nachteil, den ich bemerkt habe, ist, dass viele Leute intuitiv auf den Header klicken, um zur Homepage zurückzukehren.
Ich bin leicht verwirrt...
Ich habe mich umgesehen, wie man heutzutage Bilder ersetzt, und einige gute Artikel hier auf css-tricks gefunden, die die Vor- und Nachteile verschiedener Techniken diskutieren.
Da alle im Grunde versuchen, mit der Platzierung des Textes auf der Seite zu spielen und ihn zu verstecken, fühlte ich mich mit keiner von ihnen wohl.
Die eine Technik, die ich mir jetzt selbst ausgedacht habe, obwohl ich sie hier nirgends gefunden habe, was ich nicht erwartet habe, da sie ziemlich einfach ist.
Kann jemand versuchen zu klären, warum es eine schlechte Idee sein könnte, rgba zu verwenden und den Text einfach so transparent zu machen?
Html
Css
Danke,
Josh
Ich verwende den gleichen Weg in meinem Projekt und hatte keine Probleme.