Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Dziedziczenie koloru tła pod obrazkiem
Forum PHP.pl > Forum > Przedszkole
Majkelo23
Cześć!

Mam div'a z efektem hover, na pół strony. Teraz chciałbym na tym divie dorzucić obrazek, który będzie linkiem + nadać mu hover, który też będzie obrazkiem, ale innym.
Robię to w ten sposób:

Kod
.add{
margin: 0 auto;
width: 22px;
height:22px;
display:block;
background: url('star.png') center top no-repeat;
}

.add:hover {
   background: url('stuff.png');
}


  1. <a href="http://twitter.com/me" title="costam!" class="add"></a>


Ta grafika to gwiazdka, w obu przypadkach. I problem jest tego typu, że w tle tej gwiazdki (wiadomo, gwiazdka to nie pełny kwadrat, więc widać jakieś tam piksele ^^ ) prześwituje biały kolor tła... Nie mogę ustawić na sztywno np.
background: green url('grafika'); bo ta gwiazdka będzie występowała z divami, które mają różne kolory w tłach, do tego dochodzi jeszcze hover tych divów.
No i następny problem, że te kolory nie są przypisane bezpośrednio w klasach tych div'ów, tylko w zupełnie oddzielnej klasie (robię tak dlatego, że kolor tła jest uzależniony od strony kodu php - Ci z premium mają inny kolor, normalni inny), więc kod z div'em wygląda tak:
  1. <div class="glowna_klasa tutaj_kolor">bla bla</div>


I teraz, jak ustalić jednoznaczny kolor tła dla tych gwiazdek, aby spasował dla wszystkich divow ? Bo to nie ma zbytnio skąd dziedziczyć koloru, ponieważ jest on przypisywany z zupełnie oddzielnej klasy niż sam div :/
Ewentualnie, jak inaczej zapisać grafikę + hover, które mają być linkiem, tak aby nie babrać się z tym kolorem tła?

Dzięki, pozdrawiam!
glh
Po prostu zrób te gwiazdki w formacie png24 z przezroczystością .
Majkelo23
One są przeźroczyste... Ale jak zapiszesz je tak w css:

.add{
margin: 0 auto;
width: 22px;
height:22px;
display:block;

background: url('star.png') center top no-repeat;
}

to tworzy Ci się kwadrat 22 x 22 i tutaj leży problem, a nie w grafice.
glh
A nie chwila jeszcze raz muszę przeczytać, bo chyba nie zrozumiałem o co Ci biega smile.gif
Możesz mi wyjaśnić skąd się bierze to białe tło w tych gwiazdkach skoro są one przezroczyste?
Majkelo23
Ty dalej nie rozumiesz o czym ja piszę. Gwiazdki są przeźroczyste i mogę manipulować tym tłem o którym piszę, zapisując css chociażby tak:

Kod
background: #000000 url('star.png') center top no-repeat;


Wtedy ten kolor biały, o którym wyżej pisałem, byłby czarny bo taki zdefiniowałem powyżej ( #000000 ). I w gwoli ścisłości - nie mówimy tutaj o kolorze tła gwiazdek tylko kolorze tła diva, w którym to ta gwiazdka się znajduje.

Cytat
Możesz mi wyjaśnić skąd się bierze to białe tło w tych gwiazdkach skoro są one przezroczyste?


stąd, że div ma przypisany background na gwiazdkę + no-repeat, czyli wyświetla pojedynczą gwiazdkę, a reszta pikseli z automatu koloruje się na biało bo nie zdefiniowałem innego koloru wink.gif
glh
Możesz zapodać całość lub większą część kodu, bo chyba faktycznie się nie rozumiemy smile.gif
Może jak zobaczę to załapie w czym masz problem.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.