Ergebnis 1 bis 7 von 7

Thema: "Farbüberlagerung" eines .png per :hover etc.

  1. #1
    Xystus
    Gast

    Frage "Farbüberlagerung" eines .png per :hover etc.

    hallo!
    ich bin neue hier und habe sicher auch die ein oder andere "dumme" frage, jedoch habe ich jede zuvor versucht zu googlen und möglicherweise aufgrund schlechter umschreibungen nichts gefunden.
    jetzt hoffe ich, hier kann mit jemand weiterhelfen.

    problem:

    ich möchte ein bild.png als "menüsymbol" verwenden, das bei überfahren mit der maus die frabe ändert ->aber NUR an den stellen die auch farbe haben!!! also nicht die ganze bildflächte.
    der hintergrund hat einen verlauf daher kann ich es mit ":hover background-color" nicht trixen...
    gibt es hierfür eine gute lösung?



    danke schonmal!

    ps: es sollte dabei wenn möglich eine -transition z.b. ease-in-out; auch möglich sein.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny Avatar von styleshiet
    Registriert seit
    06.06.2012
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: "Farbüberlagerung" eines .png per :hover etc.

    Das geht am einfachsten mit zwei Bildern die beim 'Hovern' getauscht werden.
    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de

  3. #3
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: "Farbüberlagerung" eines .png per :hover etc.

    Erstell im Bildprogramm ein zweites Bild mit der gewünschten Farbe, dann kannst du bei :hover einfach das Hintergrundbild ändern indem du die andere URL angibst.

    Ungefähr so:
    Code:
    #navi a {    background: url(media/images/navi_normal.png) transparent; }
    
    #navi a:hover {    background: url(media/images/navi_hover.png) transparent; }
    Da ich noch nicht viel mit CSS3 arbeite bin ich jetzt nicht sicher, wie sich in so einem fall eine Transition auswirkt, möglicherweise sieht es durch die Überlagerung der Bilder etwas komisch aus oder funktioniert gar nicht, müsste man ausprobieren.

    Gruss,
    -Lukas

    Edit: War wohl etwas zu langsam

  4. #4
    Teeny Avatar von styleshiet
    Registriert seit
    06.06.2012
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: "Farbüberlagerung" eines .png per :hover etc.

    Transitions beziehen sich auf Eigenschaftsänderungen: z.B. Rot nach Grün, durchsichtig nach undurchsichtig, Links nach Rechts usw. Also wird das hier nicht klappen.
    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de

  5. #5
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: "Farbüberlagerung" eines .png per :hover etc.

    Hm, bist du sicher? In Chromium scheint das auf jeden Fall zu funktionieren:

    Code:
    transition: background-image 1s ease-in-out;

  6. #6
    Teeny Avatar von styleshiet
    Registriert seit
    06.06.2012
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: "Farbüberlagerung" eines .png per :hover etc.

    @lucasn: Laut Spec. ist background-image nicht aufgeführt. Siehe hier
    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de

  7. #7
    Bandit
    Gast

    Standard AW: "Farbüberlagerung" eines .png per :hover etc.


Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 03.07.2009, 23:20
  2. Bei class="active" kein Hover-Effekt: wie?
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.08.2008, 09:37
  3. Hover-Effekt bei "active"-Schaltfläche deaktiviere
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 31.03.2008, 12:49
  4. "visited-Grafik" (und Hover)
    Von Kilian im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 16.05.2005, 15:59
  5. "css" Verschiedene :hover über das class="&am
    Von vandyce im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 18.04.2004, 15:57

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •