zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kleines Bild via CSS bereitstellen und über Bild im Markup darstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.02.2016, 13:13
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard Kleines Bild via CSS bereitstellen und über Bild im Markup darstellen

Gegeben sei folgendes Markup:

HTML-Code:
<a href="foo.big.png"><img src="/foo.png" alt=""/></a>
Testcase

Die Aufgabe:
Per CSS soll ein kleines Lupensymbol bereitgestellt werden und über dem IMG in der rechten unteren Ecke des IMG dargestellt werden.

Ein Weg via "background-image" scheidet wohl für eine Darstellung im Vordergrund aus. Ich habe ein wenig mit "z-index" gespielt, aber ohne Erfolg.

Der Weg via generated content klappte auch nicht.
FF44 zeigt es hinter dem Bild an. Chrome48 zeigt nur die Lupe an und das Bild gar nicht.

Dann habe ich noch herumgestochert mit Versuchen das Symbol nicht dem IMG als generated content zuzuweisen, sondern A. Aber da scheitere ich am Positionieren.

Fällt Euch was Gutes ein?

Danke.
__________________


Geändert von AndreasB (18.02.2016 um 13:25 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.02.2016, 13:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.995
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Der Weg via generated content klappte auch nicht.
Dann hast du es falsch gemacht, weil so kann man das problemlos einbinden. Wieso wird die Lupe eigentlich als zusätzliches Bild und nicht als Schriftart eingebunden?

Zitat:
Ein Weg via "background-image" scheidet wohl für eine Darstellung im Vordergrund aus.
Weil?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.02.2016, 14:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 485
dazzle89 wird schon bald berühmt werden
Standard

Du kannst die Lupe doch ganz einfach absolut positionieren. Ob du dafür ein zusätzliches Element, wie z.B. span, nimmst oder ::before oder ::after verwendest ist ja egal, es klappt mit beidem.

Da ich gerne auf unnötiges Markup verzichte würde ich es also mit ::before / after machen. Ähnlich wie in deinem dritten Beispiel, das bei mir übrigens im FF UND Chrome funktioniert. Allerdings sollte die Lupe absolute statt relative positioniert werden und das <a> dafür position: relative, damit die Lupe keine nachfolgenden Elemente beeinflussen kann. Dann am besten dem <a> noch display-block geben, damit es die Maße vom Bild hat und die Lupe korrekt positionieren, z.B. mit bottom:0 und right: 0.
Mit Zitat antworten
  #4 (permalink)  
Alt 18.02.2016, 14:03
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

Mittlerweile habe ich das Testcase verändert.
Variante drei geht offenbar.

Aus Neugier:
Wie kann man bitte in dem genannten Testcase das Ganze via background-image lösen?

Zum Einbinden des Bildes als Schriftart:
Was passiert, wenn ein Nutzer in seinem Browser vorgibt "immer eigene Schriftart verwenden"?

Ich habe mich mit den Nachteilen dieses Hacks noch nicht tiefer beschäftigt.
__________________

Mit Zitat antworten
  #5 (permalink)  
Alt 18.02.2016, 14:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 485
dazzle89 wird schon bald berühmt werden
Standard

Wenn du die Lupe mit background-image realisieren willst und wir mal vom dritten Beispiel ausgehen, dann etwa so:

content: "";
display: block;
height: 24px;
width: 24px;
background: url("lupe.png");
Mit Zitat antworten
  #6 (permalink)  
Alt 18.02.2016, 14:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.995
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Damit das mit Hintergrund funktioniert müsstest du dein Markup dahingehend umändern, dass du keinen img-Tag mehr verwendest. Wenn dieser relevant ist, dann geht das natürlich nicht Du kannst dann dem a-Tag einfach zwei Hintergrundbilder zuweisen.

Die Sinnhaftigkeit, bzw. semantische korrektheit wird hier aber nicht berücksichtigt.
Mit Zitat antworten
  #7 (permalink)  
Alt 18.02.2016, 14:14
Benutzerbild von dows
Basti
neuer user
 
Registriert seit: 30.09.2008
Ort: Berlin
Beiträge: 86
dows befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
Zum Einbinden des Bildes als Schriftart:
Was passiert, wenn ein Nutzer in seinem Browser vorgibt "immer eigene Schriftart verwenden"?
Genau das was man erwarten könnte:
vorher.png
vorher

nachher.png
nachher
Mit Zitat antworten
  #8 (permalink)  
Alt 18.02.2016, 14:18
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@clone
Zur Hack "Einbinden als Schrift":
Den Effekt finde ich inakzeptabel. Er stört mich selber als Nutzer massiv.
__________________

Mit Zitat antworten
  #9 (permalink)  
Alt 18.02.2016, 14:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.995
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Natürlich, die Einbindung von Schriften hat nicht nur Vorteile. Was ist aber, wenn der Benutzer im Browser angibt "Zeig keine Bilder an." Oder "Führe kein Javascript aus." Dann passiert das Selbe (nur anders ) und da machen sich die Leute keine Sorgen darüber.

Aber ja, wenn keine älteren IE mehr unterstützt werden müssen, dann ist SVG zu empfehlen. Was sich bei deinem Lupen-Icon zB auch sehr anbieten würde
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.02.2016, 14:31
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von dazzle89 Beitrag anzeigen
Da ich gerne auf unnötiges Markup verzichte würde ich es also mit ::before / after machen. Ähnlich wie in deinem dritten Beispiel, das bei mir übrigens im FF UND Chrome funktioniert. Allerdings sollte die Lupe absolute statt relative positioniert werden und das <a> dafür position: relative, damit die Lupe keine nachfolgenden Elemente beeinflussen kann. Dann am besten dem <a> noch display-block geben, damit es die Maße vom Bild hat und die Lupe korrekt positionieren, z.B. mit bottom:0 und right: 0.
Wie Du vermeide ich zusätzliches Markup.
Deinen Vorschlag habe ich in's Testcase hochgeladen.

Noch funktioniert es nicht.

Ich hatte gestern schon mit "position: absolute" und Positionierungen gespielt, die Verhaltensweisen jedoch nicht wirklich durchdrungen.
__________________

Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Absolute Anfängerfragen.... Kangool CSS 7 06.04.2008 20:26
ie6 und größeres Bild mit css thorpi CSS 2 25.09.2007 20:13
Bild ÜBER Bild mit CSS und HTML? blizzi92 CSS 2 15.08.2007 11:21
Hover via CSS Genesis CSS 4 12.06.2007 12:33
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:26 Uhr.