html - transparente - transparencia css background color




Como faço para dar texto ou uma imagem de fundo transparente usando CSS? (18)

É possível, usando apenas CSS, tornar o background de um elemento semitransparente, mas ter o conteúdo (texto e imagens) do elemento opaco?

Eu gostaria de realizar isso sem ter o texto e o plano de fundo como dois elementos separados.

Ao tentar:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Parece que os elementos filhos estão sujeitos à opacidade de seus pais, então a opacity:1 é relativa à opacity:0.6 dos pais.


Você pode fazer com o rgba color code usando css como este exemplo dado abaixo.

.imgbox img{
  height:100px;
  width:200px;
  position:relative;
}
.overlay{
  background:rgba(74, 19, 61, 0.4);
  color:#fff;
  text-shadow:0px 2px 5px #000079;
  height:100px;
  width:300px;
  position:absolute;
  top:10%;
  left:25%;
  padding:25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>


A fim de tornar o fundo de um elemento semitransparente, mas ter o conteúdo (texto e imagens) do elemento opaco. Você precisa escrever código css para essa imagem e adicionar um atributo chamado opacidade com valor mínimo. por exemplo

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

// menor o valor mais será transparência, menos o valor menos será transparência.



Esse método permite que você tenha uma imagem em segundo plano e não apenas uma cor sólida e pode ser usada para ter transparência em outros atributos, como bordas. Nenhuma imagem PNG transparente é necessária.

Use :before (ou :after ) em CSS e forneça o valor de opacidade para deixar o elemento em sua opacidade original. Assim, você pode usar: before para criar um elemento faux e dar a ele o plano de fundo transparente (ou bordas) desejado e movê-lo para trás do conteúdo que deseja manter opaco com z-index .

Um exemplo ( fiddle ) (note que o DIV com o dad classe é apenas para fornecer algum contexto e contraste para as cores, este elemento extra não é realmente necessário, e o retângulo vermelho é movido um pouco para baixo e para a direita para deixar visível o fundo atrás do elemento fancyBg ):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

com este CSS:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

Neste caso, .fancyBg:before tem as propriedades CSS que você deseja ter com transparência (fundo vermelho neste exemplo, mas pode ser uma imagem ou bordas). É posicionado como absoluto para movê-lo para trás .fancyBg (use valores de zero ou o que for mais apropriado para suas necessidades).


Eu normalmente uso essa classe para o meu trabalho. É muito bom.

.transparent {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}


Há um truque para minimizar a marcação: use um pseudoelemento como fundo e você pode definir a opacidade sem afetar o elemento principal e seus filhos:

DEMO

Saída:

Código relevante:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

O suporte do navegador é o Internet Explorer 8 e posterior.


No Firefox 3 e Safari 3, você pode usar o RGBA como Georg Schölly mencionou .

Um truque pouco conhecido é que você pode usá-lo no Internet Explorer também usando o filtro de gradiente.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

O primeiro número hexadecimal define o valor alfa da cor.

Solução completa para todos os navegadores:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Isso é da transparência de plano de fundo do CSS sem afetar elementos filho, por meio de RGBa e filtros .

Screenshots prova de resultados:

Isto é quando se usa o seguinte código:

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>


O CSS3 tem uma solução fácil para o seu problema. Usar:

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

Aqui, rgba significa valor vermelho, verde, azul e alfa. O valor verde é obtido por causa de 255 e metade da transparência é obtida pelo valor de 0.5 alfa.


O problema é que o texto realmente tem opacidade total no seu exemplo. Tem opacidade total dentro da tag p , mas a tag p é apenas semitransparente.

Você poderia adicionar uma imagem de fundo PNG semitransparente em vez de perceber em CSS, ou separar texto e div em 2 elementos e mover o texto sobre a caixa (por exemplo, margem negativa).

Caso contrário, não será possível.

EDITAR:

Assim como o Chris mencionou: se você usar um arquivo PNG com transparência, você terá que usar uma solução JavaScript para fazê-lo funcionar no incômodo Internet Explorer ...


Para uma cor de plano de fundo semitransparente simples, as soluções acima (imagens CSS3 ou bg) são as melhores opções. No entanto, se você quiser fazer algo mais chique (por exemplo, animação, vários fundos, etc.), ou se você não quer confiar em CSS3, você pode tentar a "técnica de painel":

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

A técnica funciona usando duas “camadas” dentro do elemento de painel externo:

  • um (o "back") que se ajusta ao tamanho do elemento de painel sem afetar o fluxo de conteúdo,
  • e um (o "cont") que contém o conteúdo e ajuda a determinar o tamanho do painel.

A position: relative no painel é importante; Ele diz a camada de volta para caber no tamanho do painel. (Se você precisar que a tag <p> seja absoluta, mude o painel de um <p> para um <span> e coloque tudo isso em uma tag de posição absoluta <p> .)

A principal vantagem que essa técnica tem sobre as semelhantes listadas acima é que o painel não precisa ter um tamanho especificado; como codificado acima, ele se ajustará à largura total (layout de elemento de bloco normal) e somente ao conteúdo. O elemento do painel externo pode ser dimensionado da maneira que você quiser, contanto que seja retangular (ou seja, o bloco embutido funcionará; o embutido simples não funcionará).

Além disso, dá-lhe muita liberdade para o fundo; você está livre para colocar realmente qualquer coisa no elemento back e não afetar o fluxo de conteúdo (se você quiser várias sub-camadas em tamanho real, certifique-se de que eles também tenham posição: absolute, width / height: 100%, e superior / inferior / esquerda / direita: automático).

Uma variação para permitir o ajuste de fundo (via top / bottom / left / right) e / ou pinning de fundo (através da remoção de um dos pares esquerdo / direito ou superior / inferior) é usar o seguinte CSS:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Conforme escrito, isso funciona no Firefox, Safari, Chrome, IE8 + e Opera, embora o IE7 e o IE6 exijam CSS e expressões extras, o IIRC e a última vez que verifiquei, a segunda variação de CSS não funciona no Opera.

Coisas para observar:

  • Elementos flutuantes dentro da camada cont não serão contidos. Você precisa ter certeza de que eles estão limpos ou contidos, ou eles vão escorregar para fora do fundo.
  • As margens vão para o elemento de painel e o preenchimento vai para o elemento cont. Não use o oposto (margens no cont ou padding no painel) ou você descobrirá esquisitices, como a página sempre sendo um pouco mais larga que a janela do navegador.
  • Como mencionado, a coisa toda precisa ser block ou inline-block. Sinta-se à vontade para usar <div> s em vez de <span> s para simplificar seu CSS.

Uma demo mais completa, mostrando a flexibilidade desta técnica, usando-a em conjunto com o display: inline-block , e com ambos auto & specific width s / min-height s:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

E aqui está uma demonstração ao vivo da técnica que está sendo usada extensivamente:


Se você é um cara do Photoshop , você também pode usar:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Ou:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

Se você estiver usando Less , você pode usar fade(color, 30%) .


Use uma imagem PNG semitransparente ou use CSS3:

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

Aqui está um artigo de css3.info, Opacity, RGBA e compromisso (2007-06-03).


Você pode resolver isso para o Internet Explorer 8 usando (ab) a sintaxe de gradiente. O formato de cor é ARGB. Se você estiver usando o pré-processador Sass poderá converter cores usando a função interna "ie-hex-str ()".

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

Você pode usar cores RGB com opacidade como este código de cor em RGB (63,245,0) e adicionar opacidade como (63,245,0,0,5) e também adicionar RGBA para substituir RGB. Um uso para opacidade

div{
  background:rgba(63,245,0,0.5);
  }


Você pode usar o CSS 3 puro CSS 3 : rgba(red, green, blue, alpha) , onde alpha é o nível de transparência que você deseja. Não há necessidade de JavaScript ou jQuery.

Aqui está um exemplo:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

É melhor usar um .png semitransparente .

Basta abrir o Photoshop , criar uma imagem de 2x2 pixels ( escolher 1x1 pode causar um erro do Internet Explorer! ), Preenchê-lo com uma cor verde e definir a opacidade na "guia Camadas" para 60%. Em seguida, salve-o e crie uma imagem de plano de fundo:

<p style="background: url(green.png);">any text</p>

Funciona legal, é claro, exceto no adorável Internet Explorer 6 . Existem correções melhores disponíveis, mas aqui está um rápido truque:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

cor de fundo: rgba (255,0,0,0,5); como mencionado acima é a melhor resposta simplesmente colocar. Dizer usar CSS3, mesmo em 2013, não é simples porque o nível de suporte de vários navegadores muda a cada iteração.

Embora background-color seja suportada por todos os principais navegadores (não é novidade no CSS3) [1], a transparência alfa pode ser complicada, especialmente com o Internet Explorer anterior à versão 9 e com borda colorida no Safari anterior à versão 5.1. [2]

Usar algo como Compass ou SASS pode realmente ajudar na produção e compatibilidade entre plataformas.

[1] W3Schools: propriedade de cor de fundo CSS

[2] Blog de Norman: Lista de verificação de suporte ao navegador CSS3 (outubro de 2012)





opacity