Dwa tła?

[neves]

Witam. Otóż ostatnio podczas tworzenia strony natknąłem się na mały problem. Mianowicie chciałem stworzyć pasek, którego tło składałoby się z gradientu i obrazka. Kod wygląda tak:

Kod:

.menu {
    
    background-image: linear-gradient(right , #000000 0%, #0E211E 50%, #000000 100%);
    background-image: -o-linear-gradient(right , #000000 0%, #0E211E 50%, #000000 100%);
    background-image: -moz-linear-gradient(right , #000000 0%, #0E211E 50%, #000000 100%);
    background-image: -webkit-linear-gradient(right , #000000 0%, #0E211E 50%, #000000 100%);
    background-image: -ms-linear-gradient(right , #000000 0%, #0E211E 50%, #000000 100%);
    background-image: -webkit-gradient(linear,right top,left top,color-stop(0, #000000),color-stop(0.5, #0E211E),color-stop(1, #000000));
    background-image:url('img/logo.png');
    background-repeat:no-repeat;
    background-position: top;
    height: 60px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
}

Problem w tym, że w tej chwili wyświetla mi się jedynie obrazek logo (gradient znika). Jeśli przełożę kod background-image:url('img/logo.png'); na samą górę to wyświetli mi się sam gradient bez loga. Da się wyświetlić 2 obrazki na sobie czy trzeba tworzyć oddzielnego diva nakładającego się na div menu?

[Ancik]

Jedna klasa/id = jeden obrazek, ewentualnie obrazek + kolor (w postaci kodu szesnastkowego a nie obrazka). Możesz ewentualnie pokombinować, i w tego diva wsadzić jakiegoś innego diva i jemu nadawać tło itp. To wszystko jednak zależy od efektu, jaki chcesz uzyskać.

Jeżeli chcesz mieć tło pod logiem, to zrób jeden div z tłem, w niego wsadź diva z logiem o rozszerzeniu .png (obsługuje przezroczystość) i po kłopocie.
Druga opcja to tło w css, a logo jako <img> w htmlu.

[donpedro]

wykorzystaj polecenie index aby schierarchizowac warstwy. drugie wykorzystaj efet przezroczystosci cecha opacity, odpowiedzialna za przeźroczystość.

Piszesz np.


Kod:

Kod:

selektor
{
   opacity:0.2;
}

IE jej nie obsługuje. W IE musisz napisać np.:
Kod:

Kod:

selektor
{
   filter:alpha(opacity:20);
}

Czyli, jeżeli chcesz by element był przeźroczysty w trzech najpopularniejszych przeglądarkach piszesz:

Kod:

selektor
{
   opacity:0.2;
   filter:alpha(opacity:20);
}

[Kartofelek]

http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients