264

Eu posso ver nas referências CSS como definir a transparência da imagem e como definir uma imagem de plano de fundo . Mas como posso combinar esses dois para definir uma imagem de plano de fundo transparente?

Eu tenho uma imagem que eu gostaria de usar como plano de fundo, mas é muito brilhante - eu gostaria de diminuir a opacidade para cerca de 0,2. Como posso fazer isso?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}

css AP257
fonte

133

Dois métodos:

Converta em PNG e torne a imagem original 0.2 opacidade
(Método melhor) tem um <div>que é position: absolute;anterior #maine a mesma altura que #main, então aplique a imagem de fundo e opacity: 0.2; filter: alpha(opacity=20);.

Niet, o Escuro Absol
fonte

Sim, o grande problema com um PNG é o tamanho. Provavelmente será muito grande. Agora que podemos especificar opacity: ...em todos os navegadores, é muito melhor!

Alexis Wilke

1

Você ficaria surpreso com o que pode extrair do PNG. Por exemplo, com 0,2 opacidade, você provavelmente não selecionará muitos detalhes, para poder converter em PNG indexado. Na verdade, eu uso isso no meu próprio site, e ele esmaga uma imagem de fundo de 1920 x 1080 com pouco menos de 250kb de tamanho.

Niet the Dark Absol #

É melhor adicionar o índice z: -1 a essa posição: absoluta, para permitir o uso de partes inferiores acima da sobreposição. Boa resposta.

Raz

1

Você também pode usar o WebP - ele suporta transparência e o tamanho do arquivo é muito menor que PNG. Todos os principais navegadores, exceto o Safari, agora oferecem suporte ao WebP. Você pode servir o WebP para suportar navegadores e PNG para o Safari.

Dan Roberts

364

#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

Dan Eastwell
fonte

4

Conteúdo gerado a partir do IE8. caniuse.com/#feat=css-gencontent , use a propriedade filter para o IE8. caniuse.com/#search=opacity

Dan Eastwell

3

Eu adicionei um "z-index: -1" ao CSS. Dessa forma, a imagem de fundo é afetada pela opacidade, não o resto do conteúdo da #main

patrick

17

Eu uso em :beforevez de :aftere, em seguida, não preciso mexer no z-indexporque :beforeacaba abaixo do conteúdo principal automaticamente. (Atualmente testado no Chrome e FF.)

KajMagnus

1

@KajMagnus Se você fizer isso, tudo depois disso não será mostrado. Tente ter uma opacidade de 1,0 e você verá o que quero dizer.

Jessica

1

Se você estiver recebendo uma imagem de plano de fundo repetida, talvez queira / precise adicionar background-repeat: no-repeat; background-attachment: fixed; background-position: center;dentro de #main: depois de {...} .

ban-geoengineering

106

Solução com 1 div e sem imagem transparente:

Você pode usar o recurso CSS3 de vários fundos e colocar dois fundos: um com a imagem e outro com um painel transparente sobre ele (porque acho que não há como definir diretamente a opacidade da imagem de fundo):

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

Você não pode usá- rgba(255,255,255,0.5)lo porque sozinho é aceito apenas na parte de trás; portanto, usei gradientes gerados para cada navegador neste exemplo (é por isso que é tão longo). Mas o conceito é o seguinte:

background: tranparentColor, url("myImage");

http://jsfiddle.net/pBVsD/1/

Madeira
fonte

Isso funcionará apenas se o plano de fundo for uma cor sólida, se você tiver PNG24, que é um plano de fundo e deseja que ele tenha opacidade (em foco, por exemplo), isso não funcionará e você terá que usar o método de pseudoelemento , o que é realmente melhor, pois pode ser usado no IE 8 ou superior.

vsync

66

Solução simples

se você precisar definir o gradiente como apenas imagem de plano de fundo :

background-image: url(IMAGE_URL); /* fallback for older browsers */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);

Francesco Borzi
fonte

A imagem se move levemente para o topo. Tem uma correção?

HFR1994 04/04

6

Você também pode usar a imagem de plano de fundo RGBA 255.255.255: gradiente linear (para baixo, rgba (255.255.255,0.6) 0%, rgba (255.255.255,0.6) 100%), url (IMAGE_URL);

Roman

@Roman Você pode definir o componente de cor rgba com o valor usado como cor de fundo no elemento ou em seu pai de incorporação (testado no Chrome 58.0.3029.81, Edge 38.14393.0.0).

colapsar

46

Eu vi isso e, no CSS3, agora você pode inserir código assim. Digamos que eu queira cobrir todo o cenário, eu faria algo assim. Em seguida, com hsla(0,0%,100%,0.70)ou rgba, você usa um fundo branco com qualquer porcentagem de saturação ou opacidade para obter a aparência desejada.

.body{
    background-attachment: fixed;
    background-image: url(../images/Store1.jpeg);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: hsla(0,0%,100%,0.70);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
}

nathaniel helms
fonte

2

Adicionar cor de fundo e modo de mistura de fundo fez o truque para mim. Agora eu tenho um div com uma opacidade que não afeta seus filhos!

Diego Victor de Jesus

1

isso é ótimo! Criei uma função jquery para alterar a opacidade na rolagem, criando uma cor sobre uma imagem de fundo à medida que você rola para baixo. $ (function () {$ (window) .scroll (function () {var scroll = $ (window) .scrollTop (); var current = 0; var now = (current-scroll) / 7; $ ('. slide ') .css (' posição do plano de fundo ', '50%' + agora + 'px'); var color = Math.round (scroll / 7) / 100; $ ('. slide'). css ('background- color ',' rgba (128, 45, 87, '+ color +') ');});});

drooh

10

Você pode usar o CSS psuedo selector :: after para conseguir isso. Aqui está uma demonstração de trabalho.

.bg-container{
  width: 100%;
  height: 300px;
  border: 1px solid #000;
  position: relative;
}
.bg-container .content{
  position: absolute;
  z-index:999;
  text-align: center;
  width: 100%;
}
.bg-container::after{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index:-99;
  background-image: url(https://i.stack.imgur.com/Hp53k.jpg);
  background-size: cover;
  opacity: 0.4;
}

<div class="bg-container">
   <div class="content">
     <h1>Background Opacity 0.4</h1>
   </div>
</div>

Expandir snippet

Hari Das
fonte

4

Eu tive uma questão semelhante. Eu tinha uma imagem e queria reduzir a transparência e ter um fundo preto atrás da imagem. Em vez de reduzir a opacidade ou criar um plano de fundo preto ou qualquer div secundária, defino um gradiente linear na imagem, tudo em uma linha:

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url("/img/picture.png");

Expandir snippet

matteo_dm
fonte

3

Eu usei a resposta de @Dan Eastwell e funciona muito bem. O código é semelhante ao código dele, mas com algumas adições.

.granddata {
    position: relative;
    margin-left :0.5%;
    margin-right :0.5%;
}
.granddata:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("/Images/blabla.jpg");
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
}

El camerounian
fonte

2

Uma ótima maneira de fazer isso para uma imagem simples é fazê-lo usando apenas CSS para definir o plano de fundo do elemento HTML dessa maneira.

HTML {
    background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
    width: 100%;
    height: 100%;
}

Expandir snippet

Se você deseja ter uma fantasia e definir sua opacidade, no IE9 + *, você pode definir uma cor de fundo transparente do corpo. Isso funciona sobrepondo o branco semitransparente para tornar a imagem mais branca e parecer mais clara. Por exemplo, o branco com 75% de opacidade ( rgba(255,255,255,.75)) produziria o seguinte efeito.

HTML {
  background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
  width: 100%;
  height: 100%;
  position: relative;
}

body {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  background: rgba(255, 255, 255, .75);
}

<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing.
  Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus.
  Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla
  et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos,
  massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl
  nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet
  porttitor.</p>
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris
  purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum
  lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient,
  imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>

Expandir snippet

Dica: observe como o HTML é position: relative, enquanto o corpo é position: absolute. Isso evita que a cor de segundo plano do corpo se comporte mais como um marcador do texto no corpo.

Isso pode até ser expandido para algo comparável aos filtros CSS , mas ainda muito distinto, alterando o fundo de cor RGBA do corpo. Por exemplo, rgba(0,255,0,.75)criaria uma tonalidade muito verde, como você pode ver no snippet de código.

HTML {
    background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
    width: 100%;
    height: 100%;
    position: relative;
}
body {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: rgba(0,255,0,.75);
}

<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos, massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet porttitor.</p>
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient, imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing. Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus. Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>

Expandir snippet

Dica: RGBA corresponde a R ed G reen B lue A lpha. Portanto, o navegador interpreta rgba(0,255,0,.75)como algo exemplificado por {red:0, green:255, blue:0, alpha:'75%'}.

* Uma tabela de compatibilidade completa pode ser encontrada em Can I Use. No entanto, observe também que você precisa clicar em "Mostrar tudo" para ver se o IE9 é compatível.

Termo aditivo

Como já respondi à pergunta, mas tenho mais a acrescentar, estou titulando este adendo à seção e acrescentando algumas informações potencialmente úteis. Portanto, para extrapolar ainda mais o conteúdo acima, você pode usar um SVG como imagem de fundo para fazer coisas incríveis. Por exemplo, você pode criar um plano de fundo da tela de carregamento com um ícone legal do site, como você pode ver no exemplo de um SVG codificado em base64 abaixo.

HTML {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiIgYXJpYS1oaWRkZW49InRydWUiPjxnIGlkPSJrIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoLTEyMCkiIHRyYW5zZm9ybS1vcmlnaW49Ii41LjUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjYpIi8+PHN0b3Agb2Zmc2V0PSI0NyUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjYpIi8+PHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjMpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDAsMCwwLC45KSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9ImdyYWRpZW50VHJhbnNmb3JtIiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHR5cGU9InJvdGF0ZSIgZHVyPSI3MDAwbXMiIGZyb209IjAiIHRvPSIzNjAiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImQiIHI9Ii41IiBjeT0iLjUiIGN4PSIuNSI+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9ImJsYWNrIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9ImdyZXkiLz48c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iYmxhY2siLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iZSIgcj0iLjUiIGN5PSIuNSIgY3g9Ii41Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSJ5ZWxsb3ciLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0ieWVsbG93Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPjwvcmFkaWFsR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJmIj48cGF0aCBzdHJva2U9ImdyZXkiIHN0cm9rZS13aWR0aD0iLjAxIiBpZD0iYiIgZD0iTS43NS43MUEuMzEuMzEgMCAxIDEgLjc1LjMxTC42OS4zOEEuMjIuMjIgMCAxIDAgLjY4LjY2TC41Ni41N0wuNi41MUwuODIuNjh6TS42LjYzQS4xNC4xNCAwIDEgMSAuNjIuNDJMLjY2LjM5QS4xOS4xOSAwIDEgMCAuNjQuNjZ6TS41NS41OEEuMDcuMDcgMCAxIDEgLjU2LjQ2TC42LjQzQS4xMi4xMiAwIDEgMCAuNTkuNjF6Ii8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9ImciPjxwYXRoIHN0cm9rZT0iZ3JleSIgZmlsbD0icmVkIiBzdHJva2Utd2lkdGg9Ii4wMSIgZD0iTS42LjYzQS4xNC4xNCAwIDEgMSAuNjIuNDJMLjY2LjM5QS4xOS4xOSAwIDEgMCAuNjQuNjZ6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2YpIiBmaWxsPSJ1cmwoI2MpIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmVkIiBjbGlwLXBhdGg9InVybCgjZykiLz48L2c+PGcgdHJhbnNmb3JtPSJzY2FsZSgxLjEpIiB0cmFuc2Zvcm0tb3JpZ2luPSIuNS41Ij48dGV4dD48dGV4dFBhdGggaHJlZj0iI2IiIGZvbnQtc2l6ZT0iLjY1JSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgbGV0dGVyLXNwYWNpbmc9Ii0uNSUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTpwcmUiPiBZT1VSIDx0c3BhbiBmaWxsPSJyZWQiPkVYQU1QTEUgV0VCU0lURTwvdHNwYW4+IExPR088L3RleHRQYXRoPjwvdGV4dD48L2c+PC9nPjwvc3ZnPg==');
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
}
body {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: rgba(255,255,255,.5);
}

<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient, imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing. Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus. Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos, massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet porttitor.</p>

Expandir snippet

Dica: O background-size: coverCSS faz com que o logotipo SVG em segundo plano seja redimensionado para o tamanho do elemento HTML.

3.1415926535897932384626433833
fonte

1

No seu CSS, adicione ...

 filter: opacity(50%);

Em JavaScript, use ...

 element.style.filter='opacity(50%)';

Nota: adicione prefixos de fornecedor conforme necessário, mas o Chromium deve ficar bem sem.

Coder42
fonte

0

Bem, a única maneira CSS de fazer apenas a transparência do plano de fundo é via, RGBamas como você deseja usar uma imagem, sugiro usar o Photoshop ou o Gimp para tornar a imagem transparente e usá-la como plano de fundo.

fonte

Isso não está correto, há uma declaração CSS3 opactiy: 1;:, não apenas RGBa.

Kyle

4

O que ele está dizendo é definir o background-imageestilo em um contêiner e, em seguida, definir o opacityestilo no mesmo elemento. Isso também tornaria o texto e outros conteúdos desse elemento transparentes. Tente isso se você não acredita em mim: w3schools.com/Css/tryit.asp?filename=trycss_transparency

0

Acabei de adicionar position = absolute, top = 0, width = 100% no #main e defina o valor da opacidade como #background

#main{height:100%;position:absolute; top:0;width:100%}
#background{//same height as main;background-image:url(image URL);opacity:0.2}

Apliquei o plano de fundo em uma div antes da principal.

preguiçoso
fonte

-1

Me deparei com este post como eu tinha o mesmo problema, então eu pensei por que mexer com css, ajustando valores e pressionando atualizar quando você pode ajustar facilmente a opacidade no Photoshop? Copie a imagem, cole-a como uma nova camada e mova o controle deslizante de opacidade.

MBM
fonte

2

ArtB acertou com a última nota. Esta é uma solução perfeitamente adequada para outro problema. Há momentos em que essa não é a solução certa e essa é uma delas.

quer

-1

Eu tive um problema semelhante e peguei a imagem de fundo com o photoshop e criei um novo .png com a opacidade de que precisava. Problema resolvido sem se preocupar se meu CSS funcionava em todos os dispositivos e navegadores

Aebares
fonte

Posso definir a imagem de fundo e a opacidade na mesma propriedade?

Respostas:

Solução simples

Termo aditivo