html - with - w3schools titles




A opacidade: 0 tem exatamente o mesmo efeito da visibilidade: oculto (6)

Ao criar um estilo de usuário que afeta elementos em um contenteditable , notei que, se você definir algo para visibility: hidden , o sinal de entrada não desejará realmente interagir com ele. Por exemplo, se você tem

<div contenteditable><span style='visibility: hidden;'></span></div>

... então parece que se você focar esse div / span, você não pode realmente digitar nele. Considerando que com opacity: 0 parece que você pode. Eu não testei isso extensivamente, mas achei que valeu a pena mencionar isso aqui como ninguém mais nesta página falou sobre os efeitos na entrada de texto. Isso parece possivelmente relacionado aos eventos mencionados acima.

Em caso afirmativo, ele efetivamente elimina a propriedade de visibility ?

(Eu percebo que o Internet Explorer ainda não suporta essa propriedade CSS2.)
Comparações de mecanismos de layout

Veja também: Qual é a diferença entre visibilidade: oculta e exibição: nenhuma


Aqui está uma compilação de informações verificadas das várias respostas.

Cada uma dessas propriedades CSS é, de fato, exclusiva. Além de renderizar um elemento não visível, eles têm o (s) seguinte (s) efeito (s) adicional (is):

  1. Recolhe o espaço que o elemento ocuparia normalmente
  2. Responde a eventos (por exemplo, clique, pressione a tecla)
  3. Participa da taborder
                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse    *      No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

Existem muitas diferenças entre visibility e opacity . A maioria das respostas menciona algumas diferenças, mas aqui está uma lista completa.

  1. a opacidade não herda, enquanto a visibilidade

  2. A opacidade é animada, enquanto a visibilidade não é.
    (Bem, tecnicamente é, mas simplesmente não há comportamento definido para, digamos, "37% recolhido e 63% oculto", então você pode considerar isso como não animabil.)

  3. Usando a opacidade, você não pode tornar um elemento filho mais opaco do que seu pai. Por exemplo, se você tem ap com cor: preto e opacidade: 0,5, você não pode fazer qualquer um dos seus filhos totalmente preto. Valores válidos para opacidade estão entre 0 e 1, e este exemplo exigiria 2!
    Consequentemente, de acordo com o comentário de Martin , você pode ter um filho visível (com visibilidade: visível) em um pai invisível (com visibilidade: oculto). Isso é impossível com a opacidade; se um pai tiver opacidade: 0; seus filhos são sempre invisíveis.

  4. A resposta de Kornel menciona que valores de opacidade menores que 1 criam seu próprio contexto de empilhamento; nenhum valor para visibilidade faz.
    (Gostaria de poder pensar em uma maneira de demonstrar isso, mas não consigo pensar em nenhum meio para mostrar o contexto de empilhamento de uma visibilidade: elemento oculto.)

  5. De acordo com a resposta do philnash , os elementos com opacidade: 0 ainda são lidos pelos leitores de tela, enquanto visíveis: os elementos ocultos não são.

  6. De acordo com a resposta de Chris Noe , a visibilidade tem mais opções (como o recolhimento) e os elementos que não são visíveis não respondem mais aos cliques e não podem ser tabulados.

(Tornar isso um wiki da comunidade, já que pegar emprestado das respostas existentes não seria justo de outra forma.)


Não tenho certeza, mas é assim que faço a transparência entre navegadores:

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

objetos com Visibilidade: ocultos ainda têm forma, eles não são visíveis. os elementos de opacidade zero ainda podem ser clicados e reagir a outros eventos.


Não, não tem. Há uma grande diferença. Eles são semelhantes porque você pode ver através do elemento se a visibilidade estiver oculta ou a opacidade for 0, no entanto

opacidade: 0 : você não pode clicar nos elementos por trás dele.

visibilidade: oculto : você pode clicar nos elementos por trás dele.


Não.

Elementos com opacidade criam novo contexto de empilhamento.

Além disso, a especificação CSS não define isso, mas elementos com opacity:0 são clicáveis ​​e elementos com visibility:hidden não são.







css