Como tornar a cor de fundo div transparente em CSS


191

Eu não estou usando CSS3. Portanto, não posso usar opacityou filteratributos. Sem usar esses atributos, como posso tornar background-colortransparente um a div? Deve ser o tipo de exemplo da caixa de texto neste link . Aqui a cor de fundo da caixa de texto é transparente. Eu quero fazer o mesmo, mas sem usar os atributos acima mencionados.


3
Nem opacitynem filtersão CSS 3 atributos. Por que você acha que não pode usá-los?
Pekka

Não sei, no meu Eclipse Juno os dois atributos não são mostrados e de acordo com o W3School: Nota: A propriedade opacidade do CSS faz parte da recomendação do W3C CSS3. Veja aqui
Mistu4u 4/12/12

E meu eclipse não suporta (muito provavelmente) CSS3 !! :(
Mistu4u 4/12/12

1
Eu diria que você pode ignorar essas mensagens. Alguns atributos estão fora das especificações, mas ainda podem ser utilizados no mundo real. Uma combinação de opacity, filtere alguns outros atributos, como mostrado aqui: css-tricks.com/css-transparency-settings-for-all-broswers irá abranger praticamente todos os navegadores existe
Pekka

Respostas:


140

A opacidade oferece translucidez ou transparência. Veja um exemplo do Fiddle aqui .

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

Nota: estas NÃO são propriedades CSS3

Consulte http://css-tricks.com/snippets/css/cross-browser-opacity/


1
"Portanto, eu não posso usar opacidade ou atributos de filtro"
Jerska

4
@Jerska, que é uma premissa que precisa ser questionada. Sua única razão para não usar esses atributos parece ser que seu IDE está reclamando sobre eles
Pekka

Então, existe alguma outra maneira de conseguir isso?
Mistura4u

@ Subir, se você precisar de outra maneira, veja a resposta de Jerska. Mas, como dito, parece questionável por que você deseja evitar opacityem primeiro lugar.
Pekka

11
Poster queria um fundo opaco, não um elemento opaco. O texto no elemento também será opaco usando o método de opacidade. Esta resposta não está completa o suficiente para fornecer isso. Usar o rgba com um png de fallback seria muito melhor.
René

351

O problema opacityé que isso também afetará o conteúdo, quando muitas vezes você não deseja que isso aconteça.

Se você deseja que seu elemento seja transparente, é realmente tão fácil quanto:

background-color: transparent;

Mas se você quiser que seja em cores, você pode usar:

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

Ou defina uma imagem de fundo ( 1pxby 1px) salva com a direita alpha.
(Para fazer isso, uso Gimp, Paint.Netou qualquer outro software de imagem que permite que você faça isso.
Basta criar uma nova imagem, suprimir do fundo e colocar uma cor semi-transparente em que, em seguida, salve-o em png.)

Como disse René , a melhor coisa a fazer seria a de misturar os dois, com o rgbaprimeiro e 1pxpor 1pximagem como um fallback se o navegador não suporta alpha:

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

Consulte também : http://www.w3schools.com/cssref/css_colors_legal.asp .

Demonstração : My JSFiddle


3
Também digitado como comentário em outra resposta. O melhor seria usar a coloração rgba e o png descrito nesta resposta como substituto.
René

2
Iniquidade na simplicidade de usar 'transparente' no atributo cor de fundo. Mega parabéns!
tfont


4

De https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-color

Para definir a cor do plano de fundo:

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */

2

Pode ser um pouco tarde para a discussão, mas inevitavelmente alguém tropeçará neste post como eu. Encontrei a resposta que estava procurando e pensei em publicar minha opinião. O JSfiddle a seguir inclui como colocar em camadas .PNGs com transparência. A menção de Jerska ao atributo de transparência para o CSS da div foi a solução: http://jsfiddle.net/jyef3fqr/

HTML:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

E minha inspiração original: http://jsfiddle.net/5g1zwLe3/ Eu também usei o paint.net para criar os PNG transparentes, ou melhor, os PNG com BGs transparentes.


1
    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */

Forneça algumas explicações para sua resposta e evite postar apenas respostas de código.
Saeed Zhiany 12/11/19
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.