Como criar uma cor de fundo semi-transparente em css

Quando web designers começaram a usar código Cascading Style Sheet, eles usaram para definir tipos de letra e cores para sites inteiros para evitar a edição de cada arquivo HTML. Desde por volta de 2008, os designers da Web agora usam CSS também para evitar a abertura dos seus programas de edição de gráficos. Você pode usar CSS puro para adicionar fundos semi-transparentes para qualquer conteúdo em uma página da Web, por exemplo. No passado, isso exigia a criação de um arquivo PNG e, em seguida, adicionando uma correção PNG para o Internet Explorer 6. versões do Internet Explorer 8 e abaixo ainda precisa de um retorno, mas você pode adicioná-lo usando um filtro.

  • Abra o arquivo HTML da página da Web que deseja editar. Use um editor de código, como jEdit, Notepad ++ ou BBEdit. HTML tags vêm em pares com uma abertura e um tag de fechamento e de conteúdo afetados pelas tags é fechado dentro deles. Encontrar as marcas envolventes o conteúdo que você deseja dar a um fundo semi-transparente. Aqui está um exemplo:

    Conteúdo...

  • Abra o arquivo CSS para o seu site no editor de código. Se o seu site não usa um arquivo CSS, adicione código CSS entre as tags entre o tags em seu arquivo HTML. Adicione este código CSS:

    .blue div #box {}

    O texto na frente das chaves são seletores CSS. O primeiro selector seleciona por nome da marca, o segundo seleciona por ID e os últimos seleciona por nome da classe. Você só precisa de um selector, mas você pode adicionar vários seletores, como mostrado no exemplo. Use informações você encontra nas tags HTML para escrever seus seletores.

  • Adicionar suas regras de estilo CSS entre as chaves. Use RGBa - vermelho, verde e azul com transparência alfa - para definir uma cor semi-transparente para o fundo. Obter os valores das cores vermelho, verde e azul do seu programa de gráficos ou encontrá-los usando uma ferramenta de escolher cor na Internet. O código tem esta aparência:



    .azul {

    background-color: rgba (0,0,255,0.5);

    }

    O exemplo acima faz com que a cor de fundo azul com 50 por cento de opacidade. Definir o último valor na quatro-número definido como "1" para fazer uma cor full-opacidade.

  • Adicione o seguinte código entre o tags do seu arquivo HTML para fazer a cor de fundo semi-transparente compatível com o Internet Explorer 8 e abaixo:

    Substitua os seis primeiros dígitos após "startColorstr =" com o código de cor hexadecimal, onde pode encontrar usando uma ferramenta seletor de cores na Internet. Substitua os dois últimos dígitos com a porcentagem de opacidade que você quer, como "50" para 50 por cento ou "75" para 75 por cento. Fazer o valor de "endColorstr" idêntico ao "startColorstr".

De esta maneira? Compartilhar em redes sociais:

LiveInternet