Cor de fundo CSS transparente

88

Quero fazer o fundo do menu de lista desaparecer usando opacidade, sem afetar a fonte. É possível com CSS3?

Saranya
fonte
Sim claro! Você pode fazer isso com este truque: stackoverflow.com/a/15351192/366884 Boa sorte
Saud Alfadhli

Respostas:

116

agora você pode usar rgba em propriedades CSS como este:

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

0,5 é a transparência , altere os valores de acordo com seu projeto.

Demonstração ao vivo http://jsfiddle.net/EeAaB/

mais informações http://css-tricks.com/rgba-browser-support/

Rohit Azad Malik
fonte
Obrigado. mas eu quero exibir a marca de seta padrão no menu de lista sem afetar a fonte
Saranya
1
existe uma maneira de escrever isso mais curto, como rgba('black', 0.5)?
phil294
43

Mantenha estas três opções em mente (você deseja o nº 3):

1) Todo o elemento é transparente:

visibility: hidden;

2) Todo o elemento é um tanto transparente:

opacity: 0.0 - 1.0;

3) Apenas o fundo do elemento é transparente:

background-color: transparent;
Jordânia
fonte
14

sim, isso é possível. apenas use a sintaxe rgba para sua cor de fundo.

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
Oezi
fonte
2
Oi! Você sabe algo sobre a definição CSS de 'cor de fundo' com o canal aplha, mas usando o valor #HEX para a cor?
Piotr Stępniewski,
@ PiotrStępniewski Provavelmente tarde, mas agora existe essa sintaxe (veja minha resposta )
FZs
10

Aqui está um exemplo de classe usando cores nomeadas em CSS:

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

Isso adiciona um fundo que é 25% opaco (colorido) e 75% transparente.

CAVEAT Infelizmente, a opacidade afetará todo o elemento ao qual está anexado.
Portanto, se você tiver texto nesse elemento, ele também definirá o texto para 25% de opacidade. :-(

A maneira de superar isso é usar os métodos rgbaou hslapara indicar a transparência como parte da "cor" de fundo desejada. Isso permite que você especifique a transparência do fundo, independente da transparência dos outros itens em seu elemento.

Aqui estão três maneiras de definir um fundo azul com transparência de 75%, sem afetar outros elementos:

  • background: rgba(0%, 0%, 100%, 0.75)
  • background: rgba(0, 0, 255, 0.75)
  • background: hsla(240, 100%, 50%, 0.75)
SherylHohman
fonte
8

Nesse caso, background-color:rgba(0,0,0,0.5);é a melhor maneira. Por exemplo:background-color:rgba(0,0,0,opacity option);

dasdasdasdasd
fonte
6

Para alcançá-lo, você deve modificar o background-colordo elemento.

Maneiras de criar uma cor (semi-) transparente:

  • O nome da cor CSS transparentcria uma cor completamente transparente.

    Uso:

      .transparent{
        background-color: transparent;
      }
    
  • Usando as funções rgbaou de hslacor, que permitem adicionar o canal alfa (opacidade) às funções rgbe hsl. Seus valores alfa variam de 0 a 1.

    Uso:

      .semi-transparent-yellow{
        background-color: rgba(255, 255, 0, 0.5);
      }
      .transparent{
        background-color:  hsla(0, 0%, 0%, 0);
      }
    
  • Além das soluções já mencionadas, você também pode usar o formato HEX com valor alfa ( #RRGGBBAAou #RGBAnotação ).

    Isso é muito novo (contido no Módulo de Cores CSS Nível 4), mas já implementado em navegadores maiores (desculpe, sem IE).

    Isso difere das outras soluções, pois trata o canal alfa (opacidade) como um valor hexadecimal também, variando de 0 a 255 ( FF).

    Uso:

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

Você também pode experimentá-los:

  • transparent:

  • rgba():

  • #RRGGBBAA:

FZs
fonte
5

Experimente isto:

opacity:0;

Para IE8 e anteriores

filter:Alpha(opacity=0); 

Demonstração de opacidade de W3Schools

Vinod
fonte
6
O site para o qual você está ligando ... é terrível.
John Dvorak
1
@TheWandererr Vou começar com a página sendo vinculada. Lembre-se de que ele deve demonstrar um código exemplar. E ainda ... Não há recuo. Observe que eles usam o doctype HTML5, o que significa que eles atualizaram a página depois de ter sido vinculada aqui ou usaram HTML5 meio ano antes de estar no estado de recomendação de candidato. Próximo: CSS embutido é ruim, para armazenamento em cache e para legibilidade. Eles meio que têm que usá-lo aqui porque eles têm apenas um painel para a fonte da página inteira, mas se eles usaram vários painéis, como jsfiddle (2010) faz. E mesmo para uma página que demonstra opacidade,
John Dvorak
1
@TheWandererr eles poderiam ter feito melhor. Mostrando o efeito em elementos aninhados ou permitindo uma ação de foco para desativá-lo, por exemplo. Depois, há toda aquela coisa de "fingir ser o consórcio w3, e quando você for descoberto lançar outro reskin ou dois, também rotulado como w3something" - meio desonesto se você me perguntar. Eles também dizem que seus exemplos podem ser "simplificados para legibilidade" e "constantemente revisados", mas remover os espaços em branco não ajuda na legibilidade e o suporte ao IE7 também não é exatamente a nova tendência. Além disso, quem não pagaria US $ 100 por um pedaço de papel que prejudica sua credibilidade?
John Dvorak
1
@TheWandererr IIRC, eles costumavam ter uma prévia do teste. As perguntas eram uma mistura de curiosidades e coisas básicas. Eles podem ter tido algumas das respostas ligeiramente incorretas também. Quanto à parte de opacidade de seu tutorial CSS: três cabeçalhos dedicados a tornar as imagens transparentes - eles apenas alteram o seletor CSS. Em seguida, mais dois parágrafos - um para apresentar RGBA (finalmente, apenas o fundo é transparente) e um como um "exemplo de integração" (yay! Além disso, sem recuo). Então ... é isso. Não há mais nada sobre opacidade. E não, não há nenhum tópico de "opacidade avançada" posteriormente.
John Dvorak
1
@TheWandererr vamos falar sobre Javascript: Todos os seus exemplos incluem: sem indentação (mesmo em código Javascript); innerHTML =(ei, pelo menos é melhor do que os alertas e document.writeeles costumavam fazer em 2012, mas ainda sem manipulação de DOM, fora do tutorial do jQuery, exceto por um pedaço do tutorial onde eles listam os métodos relevantes um por capítulo, e mesmo assim é apenas seleção - e sim, eles listam document.write). Seu tutorial XHR usa readyStateChange em vez de onLoad (compatível desde o IE7). Ah, e sua solução alternativa para funções em JSON? Stringify-los para serem avaliados mais tarde
John Dvorak
2

Sim, você pode apenas texto simples como

.someDive{
    background:transparent 
}
Emin Adiloğlu
fonte