Przezroczysty kolor tła CSS

88

Chcę, aby tło menu listy znikało, używając krycia, bez wpływu na czcionkę. Czy to możliwe z CSS3?

Saranya
źródło
Jasne! Możesz to zrobić za pomocą tej sztuczki: stackoverflow.com/a/15351192/366884 Powodzenia
Saud Alfadhli

Odpowiedzi:

116

teraz możesz używać rgba we właściwościach CSS w ten sposób:

.class {
    background: rgba(0,0,0,0.5);
}

0.5 to przezroczystość , zmień wartości zgodnie z projektem.

Demo na żywo http://jsfiddle.net/EeAaB/

więcej informacji http://css-tricks.com/rgba-browser-support/

Rohit Azad Malik
źródło
Dziękuję Ci. ale chcę zniknąć domyślny znak strzałki w menu listy bez wpływu na czcionkę
Saranya
1
czy jest sposób na napisanie tego krótszego, jak rgba('black', 0.5)?
phil294
43

Pamiętaj o tych trzech opcjach (chcesz nr 3):

1) Cały element jest przezroczysty:

visibility: hidden;

2) Cały element jest nieco przezroczysty:

opacity: 0.0 - 1.0;

3) Tylko tło elementu jest przezroczyste:

background-color: transparent;
jordanb
źródło
14

tak, to możliwe. po prostu użyj składni rgba jako koloru tła.

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
oezi
źródło
2
Cześć! Czy wiesz coś o definicji CSS „background-color” z kanałem aplha, ale używając wartości #HEX dla koloru?
Piotr Stępniewski
@ PiotrStępniewski Pewnie późno, ale teraz jest taka składnia (patrz moja odpowiedź )
FZs
10

Oto przykładowa klasa korzystająca z nazwanych kolorów CSS:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

To dodaje tło, które jest w 25% nieprzezroczyste (kolorowe) i w 75% przezroczyste.

PRZESTROGA Niestety, krycie wpłynie na cały element, do którego jest dołączony.
Więc jeśli masz tekst w tym elemencie, ustawi on również tekst na 25% krycia. :-(

Sposobem na obejście tego problemu jest użycie metod rgbalub hslado wskazania przezroczystości jako części żądanego „koloru” tła. Pozwala to określić przezroczystość tła, niezależnie od przezroczystości innych elementów w elemencie.

Oto 3 sposoby ustawienia niebieskiego tła na 75% przezroczystości bez wpływu na inne elementy:

  • background: rgba(0%, 0%, 100%, 0.75)
  • background: rgba(0, 0, 255, 0.75)
  • background: hsla(240, 100%, 50%, 0.75)
SherylHohman
źródło
8

W tym przypadku background-color:rgba(0,0,0,0.5);jest to najlepszy sposób. Na przykład:background-color:rgba(0,0,0,opacity option);

dasdasdasdasd
źródło
6

Aby to osiągnąć, musisz zmodyfikować background-colorelement.

Sposoby tworzenia (pół) przezroczystego koloru:

  • Nazwa koloru CSS transparenttworzy całkowicie przezroczysty kolor.

    Stosowanie:

      .transparent{
        background-color: transparent;
      }
    
  • Korzystanie z funkcji rgbalub hslakolorów, które umożliwiają dodanie kanału alfa (krycia) do funkcji rgbi hsl. Ich wartości alfa mieszczą się w zakresie od 0 do 1.

    Stosowanie:

      .semi-transparent-yellow{
        background-color: rgba(255, 255, 0, 0.5);
      }
      .transparent{
        background-color:  hsla(0, 0%, 0%, 0);
      }
    
  • Oprócz wspomnianych już rozwiązań można również użyć formatu HEX z wartością alfa ( #RRGGBBAAlub #RGBAnotacją ).

    To całkiem nowe (zawarte w CSS Color Module Level 4), ale już zaimplementowane w większych przeglądarkach (przepraszam, brak IE).

    Różni się to od innych rozwiązań, ponieważ traktuje kanał alfa (krycie) również jako wartość szesnastkową, dzięki czemu mieści się w zakresie od 0 do 255 ( FF).

    Stosowanie:

      .semi-transparent-yellow{
        background-color: #FFFF0080;
      }
      .transparent{
        background-color: #0000;
      }
    

Możesz je również wypróbować:

  • transparent:

  • rgba():

  • #RRGGBBAA:

FZs
źródło
5

Spróbuj tego:

opacity:0;

Dla IE8 i starszych

filter:Alpha(opacity=0); 

Demo krycia od W3Schools

Vinod
źródło
6
Witryna, do której linkujesz ... jest okropna.
John Dvorak
1
@TheWandererr Zacznę od podlinkowanej strony. Należy pamiętać, że ma on zademonstrować przykładowy kod. A jednak ... Nie ma wcięcia. Zwróć uwagę, że używają doctype HTML5, co oznacza, że ​​albo zaktualizowali stronę po tym, jak została tu umieszczona link, albo użyli HTML5 pół roku przed tym, jak znalazł się w stanie rekomendacji kandydata. Dalej: Wbudowany CSS jest zły ze względu na buforowanie i czytelność. Muszą go tutaj użyć, ponieważ mają tylko jeden panel dla całego źródła strony, ale jeśli używali wielu paneli, tak jak jsfiddle (2010). A nawet w przypadku strony demonstrującej nieprzejrzystość
John Dvorak,
1
@TheWandererr mogli zrobić lepiej. Pokazując efekt na zagnieżdżonych elementach lub zezwalając na działanie najechania kursorem, aby je wyłączyć. Potem jest to całe „udawanie konsorcjum w3, a kiedy się dowiesz, uruchom kolejną reskinację lub dwie, również oznaczone jako w3 coś” - trochę nieuczciwe, jeśli o mnie chodzi. Mówią też, że ich przykłady mogą być „uproszczone dla czytelności” i „stale sprawdzane”, ale usuwanie białych znaków nie poprawia czytelności, a obsługa IE7 również nie jest nowym trendem. Poza tym, kto nie zapłaciłby 100 dolarów za kartkę papieru, która podważa ich wiarygodność?
John Dvorak,
1
@TheWandererr IIRC, mieli podgląd testu. Pytania były połączeniem ciekawostek i podstawowych zagadnień. Być może niektóre odpowiedzi były nieco niepoprawne. Jeśli chodzi o część dotyczącą krycia w ich samouczku CSS: trzy nagłówki poświęcone tworzeniu przezroczystych obrazów - zmieniają one tylko selektor CSS. Potem jeszcze dwa akapity - jeden do wprowadzenia RGBA (ostatecznie tylko tło jest przezroczyste), a drugi jako „przykład integracji” (yay! Również bez wcięć). Więc ... to wszystko. Nie ma nic więcej o kryciu. I nie, później też nie ma tematu „zaawansowanego krycia”.
John Dvorak,
1
@TheWandererr porozmawiajmy o Javascript: Wszystkie ich przykłady obejmują: brak wcięć (nawet w kodzie Javascript); innerHTML =(hej, przynajmniej jest to lepsze niż alerty document.write, które robili w 2012 roku, ale nadal nie ma manipulacji DOM, poza samouczkiem jQuery, z wyjątkiem fragmentu samouczka, w którym wymieniają odpowiednie metody po jednej na rozdział, a nawet wtedy jest to tylko selekcja - i tak, robią listę document.write). Ich samouczek XHR używa readyStateChange zamiast onLoad (obsługiwanego od IE7). Aha i ich obejście dla funkcji w formacie JSON? Podkreśl je, aby zostały później ocenione
John Dvorak
2

Tak, możesz po prostu zwykły tekst jako

.someDive{
    background:transparent 
}
Emin Adiloğlu
źródło