Como atribuo ao texto ou à imagem um plano de fundo transparente usando CSS?

2283

É possível, usando apenas CSS, tornar o backgroundelemento semi-transparente, mas ter o conteúdo (texto e imagens) do elemento opaco?

Eu gostaria de fazer 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>

Expandir snippet

Parece que os elementos filhos estão sujeitos à opacidade de seus pais, portanto, opacity:1é relativo ao opacity:0.6dos pais.

html css opacity Stijn Sanders
fonte

16

Infelizmente, o CSS3 tem como objetivo corrigir isso com o novo módulo de cores, permitindo especificar um valor alfa sempre que você indicar uma cor. w3.org/TR/css3-color

meandmycode

71

Na verdade, a opacidade dos elementos filho é multiplicada pela opacidade do elemento pai, não substituída. Por exemplo, se a popacidade fosse .6e a spanopacidade fosse .5, a verdadeira opacidade do texto no intervalo seria 0.3.

chharvey

1

Acho que sim, mas já que é o fundo que é translúcida, você não precisa mesmo do filtro / opacidade: codepen.io/anon/pen/ksJug

Stijn Sanders

5

@ chharvey, o que deve acontecer se eu definir opacity:.5para o pai e opacity:2o elemento filho?

Alexander Alexander

10

@ Alexander, estou feliz que você fez essa pergunta. Matematicamente, seria de se suspeitar que a criança retornaria a uma opacidade de 1. No entanto, o CSSopacity:2; é inválido . O valor da opacitypropriedade deve estar dentro do intervalo inclusivo [0,1].

precisa saber é o seguinte

2276

Use uma imagem PNG semitransparente ou use CSS 3:

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

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

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

Expandir snippet

Peter Mortensen
fonte

86

é possível fazer isso com cores hexagonais? Como #fff?

GRM

35

@grm: O W3C considerou a introdução de um formato de código hexadecimal #RRGGBBAA, mas decidiu não (por várias razões), por isso não podemos.

Outis

95

@grm com SASS Você pode,background-color: rgba(#000, .5);

Jürgen Paul

2

Vale ressaltar que, se você deseja usar a transparência, todos os navegadores que suportam RGBA também suportam HSLA , que é um mapeamento de cores muito mais intuitivo. O IE8 é o único navegador pseudossignificativo que não suporta, portanto, com exceção dos que seguem em frente e usam o HSL (A) para todas as cores.

Iono

19

@outis: Boas notícias, #RRGGBBAA agora está no nível de cor 4 .

BoltClock

476

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

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 do plano de fundo do CSS sem afetar os elementos filhos, por meio de RGBa e filtros .

Captura de tela dos resultados:

Isso ocorre ao usar 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>

Chrome-33 IE11 IE9 IE8

Adrien Be
fonte

1

Mas não no IE8. Eu tentei a nova sintaxe -ms-filter mas ainda não funcionou para mim :(

philfreo

5

Esta publicação mostra como fazê-lo no IE8: robertnyman.com/2010/01/11/…

Slapout

14

@philfreo: se você alterar o primeiro bit do código de Sebastian para "background: rgb (0, 0, 0) transparent;" agora deve funcionar no IE8. Isso estava me incomodando por algum tempo!

Tom Chantler

filter: progid Funciona muito bem com o IE 9. a cor é: transparência, vermelho, verde, azul - todos os valores hexadecimais de dois dígitos.

Thorsten Niehues

1

@AdrienBe - editei sua resposta conforme suas instruções. Infelizmente, estou fora do espaço de perguntas e respostas desta sessão de perguntas e respostas há algum tempo, portanto não posso adicionar essa conversa no momento.

user664833

108

Esta é a melhor solução que eu poderia ter, NÃO usando CSS 3. E funciona muito bem no Firefox, Chrome e Internet Explorer, tanto quanto eu posso ver.

Coloque um contêiner dive dois filhos divno mesmo nível, um para o conteúdo e outro para o segundo plano. E, usando CSS, dimensione automaticamente o plano de fundo para caber no conteúdo e coloque o plano de fundo na parte de trás usando o z-index.

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}

<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

Expandir snippet

Gorkem Pacaci
fonte

19

Ele disse "Sem separar o texto e o plano de fundo em dois elementos posicionados um sobre o outro". De qualquer forma, obrigado, essa é uma boa solução e é útil, mas em alguns casos você deseja que o elemento opaco seja filho do semitransparente.

Rolf

Eu respondi praticamente o mesmo em outra questão SO, mas acrescentou um jsFiddle & imagem provas (IE7 +), consulte aqui se interessado stackoverflow.com/a/21984546/759452

Adrien Seja

@Gorkem Pacaci: Certifique-se de que as propriedades de opacidade sejam "realmente" entre navegadores, você pode usar esse trecho de código de CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity

Adrien Seja

Por que não fazê-lo com um pseudo-elemento como :aftere evitar a marcação extra?

AndFisher

64

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 sofisticado (por exemplo, animação, vários planos de fundo etc.), ou se não quiser confiar no CSS3, tente a "técnica do 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 do painel externo:

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

O position: relativepainel no é importante; informa a camada traseira para ajustar ao tamanho do painel. (Se você precisar que a tag seja absoluta, altere o painel de a para a e envolva tudo isso em uma tag de posição absoluta .)

A principal vantagem dessa técnica sobre as similares listadas acima é que o painel não precisa ter um tamanho especificado; conforme codificado acima, caberá na largura total (layout normal do elemento de bloco) e apenas na altura do conteúdo. O elemento do painel externo pode ser dimensionado da maneira que desejar, desde que seja retangular (ou seja, o bloco embutido funcionará; o embutido simples não funcionará).

Além disso, oferece muita liberdade para o plano de fundo; você pode colocar realmente qualquer coisa no elemento back e não afetar o fluxo do conteúdo (se você quiser várias subcamadas em tamanho real, verifique se elas também têm posição: absoluta, largura / altura: 100%, e superior / inferior / esquerda / direita: automático).

Uma variação para permitir o ajuste de inserção de segundo plano (via parte superior / inferior / esquerda / direita) e / ou fixação de segundo plano (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;
}

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

Pontos a observar:

Os elementos flutuantes dentro da camada de contenção não serão contidos. Você precisará garantir que elas sejam limpas ou contidas de outra forma ou que escapem do fundo.
As margens vão no elemento do painel e o preenchimento continua no elemento cont. Não use o oposto (margens no preenchimento ou preenchimento no painel) ou você descobrirá curiosidades como a página sempre sendo um pouco mais larga que a janela do navegador.
Como mencionado, a coisa toda precisa ser em bloco ou em linha. Sinta-se livre para usar <div>s em vez de s para simplificar seu CSS.

Uma demonstração mais completa, mostrando a flexibilidade dessa técnica, usando-a em conjunto com display: inline-blocke com os auto& widths / s específicos min-height:

.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>

Expandir snippet

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

Slipp D. Thompson
fonte

Em que situação alguém não gostaria de usar CSS3 para isso?

Burkely91

@ Burkely91 Se você pode fazê-lo em CSS3, use isso absolutamente. Mas o fundo CSS3 não suporta todos os tipos de conteúdo nem flexibilidade de layout completo. O exemplo de envelope / carta acima seria difícil de executar com CSS3 por causa das bordas e preenchimento (s) central (ais) de repetição independente. Além disso, lembre-se de que esta resposta foi originalmente escrita há 5 anos, antes da disseminação do suporte ao CSS3.

Slipp D. Thompson

2

@Igor Ivancha reverteu suas alterações. Sinto muito, alterar o recuo do meu formulário preferido (guias) para o seu (2 espaços) não é legal. Você pode ter um bom motivo para usar o recuo de dois espaços em seus projetos de código do dia-a-dia, mas, para apresentação na Web, acredito que as guias têm a vitória clara - o recuo mais profundo facilita a discernimento dos níveis de hierarquia, e está longe é mais fácil converter guias em espaços de maneira confiável e, portanto, é uma forma mais compatível de todos os leitores.

Slipp D. Thompson

Igor Ivancha Além disso, parece que você executou o código através de um embelezador que colocou todos os seletores e propriedades de CSS em sua própria linha. Meus exemplos foram escritos com quebras de linha intencionais e espaçamento de logicamente peças de grupo que deve ser entendida em conjunto pela leitor- por exemplo, a maioria dos width:e height:propriedades compartilhar uma linha, porque eles são o mesmo tipo de construção e melhor entendido como uma forma 2-dimensional, não um par de restrições unidimensionais. Além disso, algumas das linhas têm uma quantidade razoável, porque o conteúdo repetido não é tão importante para mostrar.

Slipp D. Thompson

@Igor Ivancha A organização, o agrupamento e o estilo lógicos são extremamente importantes para escrever códigos sãos e compreensíveis, assim como acontece com todos os tipos de escrita. As alterações feitas foram equivalentes a entrar em alguém postar e remover todas as quebras de parágrafos e colocar uma nova linha forçada após cada frase. Se você gostaria de ser tão obtuptamente pedante em seu próprio trabalho, tudo bem, você é livre para fazê-lo. Mas, por favor, não embuste o caráter e a expressão semânticos no trabalho de outras pessoas.

Slipp D. Thompson

58

É melhor usar um semitransparente.png .

Basta abrir o Photoshop , criar uma 2x2imagem de pixel ( escolher 1x1pode causar um bug do Internet Explorer! ), Preenchê-la com uma cor verde e definir a opacidade na "guia Camadas" para 60%. Em seguida, salve-o e torne-o uma imagem de plano de fundo:

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

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

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

Comunidade
fonte

54

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

DEMO

Resultado:

Opacidade de fundo com um pseudo-elemento

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>

Expandir snippet

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

web-tiki
fonte

23

O método mais fácil seria usar uma imagem PNG de plano de fundo semitransparente .

Você pode usar JavaScript para fazê-lo funcionar no Internet Explorer 6, se necessário.

Eu uso o método descrito em PNGs transparentes no Internet Explorer 6 .

Fora isso, você poderia fingir usando dois side-by-side irmãos elementos - Faça um semi-transparente , então absolutamente posicionar o outro por cima .

Chris
fonte

2

Tudo o que preciso é de uma cor de plano de fundo simples, que tamanho de PNG você proporia que eu criasse com essa cor? 1x1 fará prestação fazer um monte de trabalho, demasiados pixels torna este PNG muito grande (deve ser ok file-size, uma vez comprimido, mas ainda renderização precisa descompactá-lo para usá-lo) ...

Stijn Sanders

3

Eu recomendaria algo como 30px x 30px, que usa menos memória ao renderizá-lo repetindo que um 1x1 e ainda é pequeno o suficiente para minimizar o uso da largura de banda.

315/09 Chris

21

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

Use :before(ou :after) no 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 falso e fornecer o plano de fundo transparente (ou bordas) desejado e movê-lo para trás do conteúdo com o qual você deseja manter opaco z-index.

Um exemplo ( violino ) (observe que a DIVclasse with dadé apenas para fornecer algum contexto e contraste com as cores, esse elemento extra na verdade não é necessário e o retângulo vermelho é movido um pouco para baixo e para a direita para deixar visível o fundo para trás o fancyBgelemento):

<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;
}

Nesse caso, .fancyBg:beforepossui 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 zero ou o que for mais apropriado para suas necessidades).

frozenkoi
fonte

17

O problema é que o texto realmente tem total opacidade no seu exemplo. Possui opacidade total dentro da ptag, mas pé apenas semi-transparente.

Você pode adicionar uma imagem de plano de fundo PNG semitransparente em vez de realizá-la em CSS ou separar o texto e dividir em dois elementos e mover o texto sobre a caixa (por exemplo, margem negativa).

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

Assim como Chris mencionou: se você usa um arquivo PNG com transparência, precisa usar uma solução alternativa em JavaScript para fazê-lo funcionar no irritante Internet Explorer ...

SvenFinke
fonte

15

Quase todas essas respostas pressupõem que o designer deseja um fundo de cor sólida. Se o designer realmente deseja uma foto como plano de fundo, a única solução real no momento é o JavaScript, como o plugin jQuery Transify mencionado em outro lugar .

O que precisamos fazer é participar da discussão do grupo de trabalho CSS e fazer com que eles nos dêem um atributo de opacidade em segundo plano! Deve funcionar em conjunto com o recurso de múltiplos fundos.

mais fino
fonte

14

Aqui está como eu faço isso (pode não ser o ideal, mas funciona):

Crie o divque você deseja ser semi-transparente. Dê uma classe / ID. Deixe em branco e feche. Dê a ele uma altura e largura definidas (digamos, 300 pixels por 300 pixels). Dê uma opacidade de 0,5 ou o que você quiser e uma cor de fundo.

Em seguida, diretamente abaixo dessa div, crie outra div com um ID / classe diferente. Crie um parágrafo dentro dele, onde você colocará seu texto. Dê a divposição: relativa e superior: -295px(isso é 295 pixels negativos ). Dê um índice z de 2 para uma boa medida e verifique se a opacidade é 1. Estilize o seu parágrafo como quiser, mas verifique se as dimensões são menores que as do primeiro divpara não transbordar.

É isso aí. Aqui está o código:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}

<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

Expandir snippet

Isso funciona no Safari 2.x, mas eu não sei sobre o Internet Explorer.

paris ionescu
fonte

O elemento adicional pode ser evitada e, em vez usar um elemento pseudo como :beforeou:after

frozenkoi

12

Aqui está um plugin do jQuery que manipulará tudo para você, Transify ( Transify - um plugin do jQuery para aplicar facilmente transparência / opacidade ao plano de fundo de um elemento ).

Eu estava enfrentando esse problema de vez em quando, então decidi escrever algo que tornaria a vida muito mais fácil. O script tem menos de 2 KB e requer apenas uma linha de código para fazê-lo funcionar, além de animar a opacidade do plano de fundo, se você desejar.

joren
fonte

11

Há algum tempo, escrevi sobre isso em Cross Browser Background Transparency With CSS .

Estranhamente, o Internet Explorer 6 permitirá que você torne o plano de fundo transparente e mantenha o texto na parte superior totalmente opaco. Para os outros navegadores, sugiro usar um arquivo PNG transparente.

philnash
fonte

10

Opacidade de fundo, mas não o texto tem algumas idéias. Use uma imagem semitransparente ou sobreponha um elemento adicional.

medo
fonte

9

Se você é um cara do Photoshop , 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**
}

suraj rawat
fonte

8

Para tornar o fundo de um elemento semitransparente, mas o conteúdo (texto e imagens) do elemento é opaco, você precisa escrever um código CSS para essa imagem e adicionar um atributo chamado opacitycom valor mínimo.

Por exemplo,

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

// Quanto menor o valor, mais transparente, ou menor será a transparência.

Pushp Singh
fonte

Essa é uma maneira de fazer isso em navegadores modernos. I combiná-lo com os valores RGBA como um fallback

Tahir Khalid

Sim, correto. Esta é uma das maneiras de lidar com o navegador moderno.

Pushp Singh

O que você quer dizer com "o valor menor será a transparência" (parece incompreensível)? (Responder por editar a sua resposta , não aqui nos comentários, se for o caso.)

Peter Mortensen

7

CSS 3 tem uma solução fácil para o seu problema. Usar:

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

Aqui, rgbasignifica vermelho, verde, azul e valor alfa. O valor verde é obtido por causa de 255 e a meia transparência é obtida por um valor alfa de 0,5.

Touhid Rahman
fonte

Como isso é diferente de algumas respostas anteriores?

Peter Mortensen

6

Se você estiver usando Menos , poderá usar fade(color, 30%).

alex
fonte

6

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

Embora background-colorseja suportada por todos os principais navegadores (que não sejam novos no CSS 3) [1], a transparência alfa pode ser complicada, especialmente no Internet Explorer anterior à versão 9 e nas bordas do Safari antes da versão 5.1. [2]

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

[1] W3Schools: propriedade CSS background-color

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

Will Nielsen
fonte

4

Você pode resolver isso no Internet Explorer 8 (ab) usando a sintaxe de gradiente. O formato da 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')";

Henrik
fonte

4

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

Aqui está um exemplo:

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

Peter Mortensen
fonte

3

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?

premgowda
fonte

2

Você pode fazer isso rgba color codeusando 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>

Expandir snippet

Rudra
fonte

1

Existe uma solução mais fácil para colocar uma sobreposição sobre uma imagem na mesma div. Não é o uso correto desta ferramenta. Mas funciona como um encanto para fazer essa sobreposição usando CSS.

Use uma sombra embutida como esta:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

Isso é tudo :)

edd2110
fonte

1

Você pode usar RGBA (red, green, blue, alpha) no CSS . Algo assim:

Então, simplesmente fazer algo assim vai funcionar no seu caso:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}

Alireza
fonte

1

De acordo com o meu ponto de vista, a melhor maneira de usar uma cor de fundo com opacidade é a seguinte. Se usarmos isso, não perderemos a opacidade para os outros elementos, como cor de teste, borda etc.

background-color: rgba(71, 158, 0, 0.8);

Use cor de fundo com opacidade

background-color: rgba(R, G, B, Opacity);

Vinod Kumar
fonte

0

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

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}

Expandir snippet

Cengkuru Michael
fonte

0

Funcionou para mim ao usar o formato, #AARRGGBBentão o que funcionava para mim era #1C00ff00. Tente, porque eu já vi isso funcionando para alguns e não para outra pessoa. Estou usando em CSS.

Donald Shahini
fonte

0

Você pode usar o valor de opacidade anexado ao valor hexadecimal:

background-color: #11ffeeaa;

Neste exemplo aaé a opacidade. Uma opacidade de 00meios transparentes e ffcores sólidas.

A opacidade é opcional, portanto, você pode usar o valor hexadecimal como sempre:

background-color: #11ffee;

Você também pode usar a maneira antiga com rgba():

background-color: rgba(117, 190, 218, 0.5);

E a backgroundabreviação, se você quiser garantir que o plano de fundo não tenha outros estilos, como imagens ou gradientes:

background: #11ffeeaa;

A partir da especificação do Mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

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

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

AMS777
fonte

-2

Você pode usar cores RGB com opacidade como um código de cores em RGB (63, 245, 0) e adicionar opacidade (como 63, 245, 0, 0,5) e também substituir RGB por RGBA. Adeve ser usado para opacidade.

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

Expandir snippet

Vijay Sharma
fonte

Como atribuo ao texto ou à imagem um plano de fundo transparente usando CSS?

Respostas:

Captura de tela dos resultados:

Ou: