Como faço para dar um texto ou uma imagem de fundo transparente usando CSS?
https://stackoverflow.com/questions/806000
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
É possível, utilizando CSS somente, para fazer a background de um elemento semi-transparente, mas tem o conteúdo (texto e imagens) do elemento opaca?
Eu gostaria de fazer isso sem ter o texto e 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 elementos filhos são submetidos à opacidade de seus pais, de modo opacity:1 é relativo ao opacity:0.6 do pai.
Solução
Ou usar um PNG imagem ou uso CSS3 semi-transparente:
background-color:rgba(255,0,0,0.5);
Aqui está um artigo de css3.info, opacidade, RGBA e compromisso (2007-06-03).
<p style="background-color:rgba(255,0,0,0.5);">
<span>Hello world</span>
</p>
Outras dicas
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, bem usando o filtro gradiente.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
O primeiro número hex define o valor alfa da cor.
solução completa 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)";
}
Isto é de CSS transparência do fundo sem afetar elementos filho, através RGBa e filtros .
Imagens prova de resultados:
Isto é, quando usando 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>
Esta é a melhor solução que eu poderia vir acima com, não utilizando CSS 3. E ele funciona muito bem no Firefox, Chrome e Internet Explorer, tanto quanto eu posso ver.
Coloque um contêiner DIV e duas DIVs filho no mesmo nível, um para o conteúdo, um para o fundo. E usando CSS, auto-size o fundo para caber o conteúdo e colocar o fundo realmente na parte de trás usando 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>
Para uma cor de fundo semi-transparente simples, as soluções acima (CSS3 ou imagens bg) são as melhores opções. No entanto, se você quiser fazer algo mais sofisticado (por exemplo, animação, vários fundos, etc.), ou se você não quer contar com CSS3, você pode tentar a “técnica 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 utilizando duas “camadas” dentro do elemento de painel exterior:
- um (o “back”) que ajusta o 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.
O position: relative no painel é importante; ele diz camada de volta para ajuste ao tamanho do painel. (Se você precisar a tag <p> ser absoluta, mudar o painel de um <p> a um <span> e envolva tudo isso em uma tag <p> absolutamente posições.)
A principal vantagem desta técnica tem os mais semelhantes listados acima é que o painel não tem que ser um tamanho especificado; como codificada acima, que se encaixam de largura total (esquema normal de bloco-elemento) e apenas tão elevado como o conteúdo. O elemento de painel exterior pode ser dimensionado qualquer maneira que você quiser, contanto que ele é retangular (ou seja inline-block vai funcionar; em linha simples de idade não).
Além disso, dá-lhe muita liberdade para o fundo; Você está livre para colocar realmente nada no elemento para trás e tê-lo não afeta o fluxo de conteúdo (se você quiser vários sub-camadas de tamanho completo, apenas se certificar de que eles também têm position: absolute, largura / altura: 100%, e superior / inferior / esquerda / direita:. automático)
Uma variação para permitir o ajuste de fundo de inserção (via superior / inferior / esquerda / direita) e / ou fundo fixando (via removendo um dos pares de fundo esquerda / direita ou superior /) é usar o seguinte CSS em vez disso:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
Como escrito, isso funciona no Firefox, Safari, Chrome, o IE8 +, e Opera, embora IE7 e IE6 exigem CSS extra e expressões, IIRC, ea última vez que verifiquei, a segunda variação CSS não funciona no Opera.
As coisas que atente para:
- elementos de flutuação no interior da camada cont não será contido. Você vai precisar para se certificar de que eles são apagados ou de outra forma contida, ou eles vão escorregar para fora do fundo.
- Margens ir no elemento painel e estofamento passa o elemento cont. Não faça usar o oposto (margens no cont ou estofamento no painel) ou você vai descobrir raridades como a página de estar sempre ligeiramente maior do que a janela do navegador.
- Como mencionado, a coisa toda precisa ser bloco ou inline-block. Sinta-se livre para usar
<div>s em vez de<span>s para simplificar o seu CSS.
A mais completa demo, mostrando a versatilidade desta técnica, utilizando-o em conjunto com display: inline-block, e com as duas auto & específicos widths / min-heights:
.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á um ao vivo demonstração da técnica a ser usada extensivamente:
É melhor usar um .png semi-transparente .
Apenas aberto Photoshop , criar uma imagem de pixel 2x2 (picking 1x1 pode causar um bug do Internet Explorer! ), preenchê-lo com uma cor verde e definir a opacidade em "guia Camadas" a 60%. Depois salvá-lo e torná-lo uma imagem de fundo:
<p style="background: url(green.png);">any text</p>
Ele funciona legal, é claro, exceto em linda Internet Explorer 6 . Existem melhores correções disponíveis, mas aqui está um corte 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');
}
Existe um truque para minimizar a marcação: Use um elemento pseudo como o fundo e você pode definir a opacidade para isso sem afetar o elemento principal e seus filhos:
Output:
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 ao navegador é Internet Explorer 8 e mais tarde.
O método mais fácil seria a utilização de um fundo semi-transparente imagem PNG .
Você pode usar o JavaScript para fazê-lo funcionar em Internet Explorer 6 se você precisa.
Eu uso o método descrito no PNGs transparentes no Internet Explorer 6 .
Além disso,
você poderia fingir usando two side-by-side sibling elements -? Make um semi-transparente , então absolutely position the other over the top
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, tais como fronteiras. Não há imagens PNG transparentes são necessários.
Use :before (ou :after) em CSS e dar-lhes o valor de opacidade para deixar o elemento em sua opacidade originais. Assim, você pode usar: antes de fazer um elemento falso e dar-lhe o fundo transparente (ou fronteiras) que deseja e movê-lo para trás o conteúdo que você deseja manter opaco com z-index.
Um exemplo ( fiddle ) (note que o DIV com dad classe é apenas para fornecer algum contexto e contraste com as cores, é, na verdade, não é necessário esse elemento extra, 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ê quer ter com transparência (fundo vermelho neste exemplo, mas pode ser uma imagem ou fronteiras). É posicionado como absoluta para movê-lo para trás .fancyBg (valores de uso de zero ou o que for mais apropriado para suas necessidades).
O problema é que o texto realmente tem opacidade total no seu exemplo. Tem opacidade total dentro da tag p, mas a tag p é apenas semi-transparente.
Você pode adicionar uma imagem de fundo PNG semi-transparente em vez de realizá-lo em CSS, ou texto e div separada em 2 elementos e mover o texto sobre a caixa (por exemplo, margem negativa).
Caso contrário, não será possível.
EDIT:
Assim como Chris mencionado: se você usar um arquivo PNG com transparência, você tem que usar um JavaScript Como contornar Para fazê-lo funcionar no Internet traquinas Explorador ...
Quase todas estas respostas assumir o designer quer um fundo de cor sólida. Se o designer realmente quer uma foto como plano de fundo a única solução real no momento é JavaScript como o jQuery Transify plugin de mencionado em outros lugares .
O que precisamos fazer é juntar o CSS trabalha discussão em grupo e torná-los nos dar um atributo background-opacidade! Ele deve trabalhar de mãos dadas com o recurso de múltiplas-backgrounds.
Aqui está como eu fazer isso (que pode não ser o ideal, mas funciona):
Criar a div que você quer ser semi-transparente. Dê-lhe uma classe / id. Deixá-lo vazio, e fechá-lo. Dê-lhe uma altura conjunto e largura (por exemplo, 300 pixels por 300 pixels). Dê-lhe uma opacidade de 0,5 ou o que quiser, e uma cor de fundo.
Então, imediatamente inferior ao div, criar outra div com uma classe diferente / id. Criar um parágrafo em seu interior, onde você vai colocar o seu texto. Dê a posição div: relativo, e de cima: -295px (que NEGATIVE 295 pixels). Dê-lhe um z-index de 2 para uma boa medida, e certifique-se a sua opacidade é 1. Estilo seu parágrafo como quiser, mas certifique-se as dimensões são menores do que o do primeiro div por isso não transborde.
É isso. 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>
Isso funciona no Safari 2.x, eu não sei sobre o Internet Explorer.
Aqui é um plugin jQuery que vai cuidar de tudo para você, Transify ( Transify -. um plugin jQuery para facilmente aplicar transparência / opacidade para fundo de um elemento )
Eu estava correndo para esse problema de vez em quando, então eu decidi escrever algo que iria tornar a vida muito mais fácil. O script é inferior a 2 KB e só requer uma linha de código para fazê-lo funcionar, e que também irá lidar com animar a opacidade do fundo se você gosta.
Opacidade de fundo, mas não o texto tem algumas idéias. Ou usar uma imagem semi-transparente, ou sobrepor um elemento adicional.
Um tempo atrás, eu escrevi sobre isso em Cross browser de Transparência Fundo Com CSS .
Curiosamente Internet Explorer 6 lhe permitirá tornar o fundo transparente e manter o texto na parte superior totalmente opaco. Para os outros navegadores Eu, então, sugerir o uso de um arquivo PNG transparente.
Se você é um Photoshop cara, 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**
}
A fim de tornar o fundo de um elemento semi-transparente, mas tem o conteúdo (texto e imagens) do elemento opaco. Você precisa escrever código CSS para essa imagem e você tem que adicionar um atributo chamado opacidade com valor mínimo. por exemplo.
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// menor o valor maior será a transparência, minério do valor menor será a transparência.
background-color: rgba (255,0,0,0.5); como mencionado acima é a melhor resposta simplesmente colocar. Dizer uso CSS3, mesmo em 2013, não é simples, porque o nível de suporte de vários navegadores muda a cada iteração.
Enquanto background-color é suportado por todos os principais navegadores (não novos para CSS3) [1] a transparência alfa pode ser complicado, especialmente com o Internet Explorer anteriores à versão 9 e com a cor da borda no Safari anteriores à versão 5.1. [2]
Usando algo como Compass ou SASS pode realmente produção ajuda e compatibilidade de plataforma cruzada.
[1] W3Schools: CSS background-color Propriedade
[2] de Norman Blog: Navegador Suporte Checklist CSS3 (Outubro de 2012)
CSS3 tem uma solução fácil do seu problema. Use:
background-color:rgba(0,255,0,0.5);
Aqui, rgba significa vermelho, verde, azul e alfa valor. valor verde é obtido por causa da 255 e metade transparência é obtida por valor de 0,5 alfa.
Se você estiver usando Menos , você pode usar fade(color, 30%).
Você pode resolver isso por Internet Explorer 8 por (ab) usando a sintaxe gradiente. O formato de cor é ARGB. Se você estiver usando o Sass pré-processador pode converter as cores usando o built-in função "ie-hex-str ()".
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
Você pode usar puro CSS 3 : rgba(red, green, blue, alpha), onde alpha é o nível de transparência você quer. Não há necessidade de JavaScript ou jQuery.
Aqui está um exemplo:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
<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>
Não há uma solução mais fácil para colocar uma sobreposição sobre uma imagem na mesma div. Não é o correto uso desta ferramenta. Mas funciona como um encanto para fazer essa sobreposição usando CSS.
Use uma sombra inserida assim:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
Isso é tudo:)
Você pode usar RGBA (red, green, blue, alpha) na CSS , algo como isto:
Então, basta fazer algo como isto vai funcionar no seu caso:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Você pode fazer com
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>
Eu normalmente usar esta classe para o meu trabalho. Sua 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 */
}
De acordo com meu ponto de vista melhor maneira de cor o uso do fundo com opacidade se usarmos isso, então vamos opacidade não perder para os outros elementos como cor de teste e fronteira etc ..
background-color: rgba(71,158,0,0.8);
Use a cor de fundo com opacidade
cor de fundo: rgba (R, G, B, opacidade);
Você pode usar a cor 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 substituir RGB. A utilização de opacidade
div{
background:rgba(63,245,0,0.5);
}
