Przejdź do treści

Tło - CSS

Usunięcie tła {background: none, background-color: transparent}

Jak usunąć wcześniej dodane tło?

selektor { background: none }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Polecenie umożliwia wykasowanie zdefiniowanego wcześniej tła. Okazuje się ono przydatne, częściej niż można by sądzić. Na przykład wyobraźmy sobie, że w zewnętrznym arkuszu stylów określamy ogólne własności dla wszystkich stron naszego serwisu. Załóżmy, że znajduje się tam m.in. deklaracja tła obrazkowego stron. Jeśli teraz zechcemy tylko na jednej ze stron zastosować zwykłe tło, a jednocześnie na innych pozostawić nadal obrazkowe, może to uczynić na dwa sposoby:

  1. Nie dołączać zewnętrznego arkusza do wybranej strony. Takie rozwiązanie nie jest jednak zbyt dobre, ponieważ musimy ręcznie wpisywać wszystkie inne deklaracje, które znajdują się w arkuszu (np. kolor tekstu na stronach), pomijając przy tym tą, która odpowiada za tło. Chociaż początkowo osiągniemy żądany efekt, jednak przy każdej modyfikacji szaty graficznej serwisu, będziemy zmuszeni modyfikować również taką stronę. Nie dość, że jest to uciążliwe (zwłaszcza gdy istnieje więcej takich stron), to po jakimś czasie możemy po prostu zapomnieć o tej dodatkowej modyfikacji, co sprawi, że strona taka będzie różniła się wyglądem od innych.
  2. W wewnętrznym arkuszu wybranej strony lub w stylu inline można umieścić przedstawione powyżej polecenie. Możemy wtedy bez przeszkód dołączyć zewnętrzny arkusz i nie musimy za każdym razem oddzielnie modyfikować takiej strony.

Jak widać drugi sposób jest znacznie korzystniejszy. Dodatkowo istnieją sytuacje, gdy pierwsza metoda jest wręcz niemożliwa do zastosowania, np. w przeglądarkach odsyłacze są zwykle domyślnie podkreślane. Jeśli chcemy z tego zrezygnować, musimy usunąć dekorację tekstu:

a:link, a:visited { text-decoration: none }

Dla wielu innych własności stylów istnieją analogicznie działające wartości - zwykle są to: none, normal, auto, transparent itp.

Polecenie background: none usuwa wszystkie własności dotyczące tła. Można również usunąć tylko wybrane, stosując odpowiednie polecenia dla każdej własności, którą chcemy usunąć (np. background-color: transparent; background-image: none itd.). Pozwala to np. usunąć tło obrazkowe, lecz pozostawić kolor tła. Działają one oczywiście nie tylko z zewnętrznym arkuszem, ale również z wewnętrznym - zgodnie z zasadami kaskadowości.

Przykład {background-color: transparent}

Gdyby arkuszu stylów tej strony [zobacz: Wstawianie stylów], została umieszczona taka linijka:
h4 { background-color: red }
to wszystkie tytuły rzędu czwartego miałyby automatycznie przypisane tło koloru czerwonego. Ale jeśli chcemy zrezygnować z tła dla wybranych elementów, wystarczy wpisać background-color: transparent w definicji inline:
<h4 style="background-color: transparent">To również jest tytuł rzędu czwartego, lecz mimo to nie ma już tła</h4>

Komentarze

Zobacz więcej komentarzy

Facebook