CSS RGBA Border / Background Alpha Double

StackOverflow https://stackoverflow.com/questions/2626039

  •  26-09-2019
  •  | 
  •  

Pergunta

Estou trabalhando em um site que tem muita transparência envolvido e pensei em tentar construí -lo inteiramente no RGBA e depois fazer fallbacks para o IE. Preciso de um efeito de borda no estilo "Facebox", onde a borda externa é arredondada e é menos opaca que o fundo da caixa que ela circunda.

O último exemplo de http://24ways.org/2009/working-with-rgba-colour Parece sugerir que é possível, mas não consigo fazer com que funcione. Quando eu tento o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>RGBA Test</title>
 <style type='text/css'>
   body {
     background: #000;
     color: #fff;
   }
   #container {
     width: 700px;
     margin: 0 auto;
     background: rgba(255, 255, 255, 0.2);
     border: 10px solid rgba(255, 255, 255, 0.1);
     padding: 20px;
   }
  </style>
</head>
<body>
  <div id='container'>
    This should look like a facebox.
  </div>
</body></html>

Parece que o plano de fundo "se estende" sob a borda do elemento, o que faz com que os valores de pixels sejam adicionados. Assim, quando o fundo e a borda são semi-transparentes, a borda sempre será mais opaca que o fundo do elemento. Este é exatamente o oposto do que estou tentando alcançar, mas parece que deve ser possível com base nos exemplos que vi.

Devo também acrescentar que não posso usar outro elemento dentro do recipiente, porque também vou usar um radiato de fronteira no recipiente para obter cantos arredondados, e o webkit quadrilha os cantos dos elementos filhos se eles tiverem um fundo atribuído, o que significaria essencialmente uma borda externa arredondada com conteúdo quadrado.

Desculpe, não posso postar uma imagem disso ... aparentemente não tenho representante suficiente para postar uma imagem.

Foi útil?

Solução

Você pode usar o novo background-clip: padding-box; propriedade para fazer isso. Ele calcula de onde o fundo deve iniciar dentro de uma caixa. Para mais detalhes e exemplos, verifique aqui

Outras dicas

Testar isso no Firefox confirma o que você descreve - e demorei um pouco para perceber as implicações disso! Ter a borda menos transparente não terá efeito no fundo transparente abaixo dela, porque a borda é (como você diz) aditiva.

Nesse caso, você terá que simular o efeito que procura e trabalhar com as cores mais do que o alfa:

background: rgba(128, 128, 128, 0.7);
border: 10px solid rgba(0, 0, 0, 0.1);

Experimente isso:

#container {
    width: 700px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    border: 10px solid rgba(255, 255, 255, 0.1);
    padding: 20px;

    /* and here is the fix */
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top