5

Fazer com que o fundo de uma <img> ou <div> fique transparente igual ao design do iPhone - embaçado, desfocado -, mas só que com CSS.

2

4 Respostas 4

11

Pedro, então use com as configurações abaixo, e regule o "embaçamento" por meio da propriedade filter: blur, o resultado sairá assim:

link embaçado

<!-- HTML -->
<div class="content">
</div>
/* CSS */
.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('http://www.zeldadungeon.net/wp-content/uploads/2011/07/legend-of-zelda-ocarina-of-time-3d-screenshots.jpg');
  width: 1200px;
  height: 800px;

  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  margin-left: 20px;
  margin-right: 20px;
}
1
8
+50

Não existe ainda nenhuma especificação CSS para o caso que você descreve. Entretanto, ele pode ser simulado com uma combinação.

A imagem ios-7.jpg é o nosso background. A idéia é posicionar a div que irá exibir a mesma imagem dentro do container principal, e então mover o background de acordo com o deslocamento.

Exemplo:

.bg
{
    background-image:url(http://www.cnetfrance.fr/i/edit/2013/06/39791275/620x465/ios-7.jpg);
    width:620px;
    height:465px;
    position:relative;
}

.fg
{
    width:128px;
    height:128px;
    position:absolute;
    top:154px;
    left:69px;
    border: 4px solid black;
    border-radius:6px;
    overflow:hidden;
}

.fg .conteudo
{
    position:absolute;
    top:0;
    left:0;
}

.fg .bg
{
    position:absolute;
    background-image:url(http://www.cnetfrance.fr/i/edit/2013/06/39791275/620x465/ios-7.jpg);
    top:-154px;
    left:-69px;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    display:none;
}

.fg:hover .bg
{
    display:block;
}
<div class='bg'>
    <div class='fg'>
        <div class='bg'></div>
        <div class='conteudo'>
            Conteúdo
        </div>        
    </div>
</div>

Clique em > Executar trecho de código e passe o mouse sobre a zona com borda preta para ver o efeito em acão. Note que nem o texto 'Conteúdo' nem a borda sofrem o efeito de blurring.

3
  • TEM CERTEZA ABSOLUTA de que não há a possibilidade de criar uma cobinação da propriedade ´blur´ e ´opacit´ com uma máscara para dar esse "efeito" em uma imagem relativa???
    – Lollipop
    Commented 8/10/2015 às 18:15
  • @Lollipop não há necessidade de confiar na minha resposta - sinta-se à vontade para procurar por soluções alternativas. Blur e Opacity são aplicados ao elemento, e não ao background (ou pelo menos este é o comportamento no no momento), exigindo assim que o alvo dos filtros seja um elemento distinto.
    – OnoSendai
    Commented 8/10/2015 às 19:39
  • Exatamente. Esse elemento(não background) estando relativo ao alvo, não poderia dar esse efeito? Grato!
    – Lollipop
    Commented 9/10/2015 às 15:16
3

Para browsers modernos, utilize-se o atributo do CSS opacity para ver imagens ou outras coisas com transparência:

div {
  opacity: 0.8; //1.0 = totalmente opaco, 0.0 = totalmente transparente
}

Para ver uma imagem embaçada, tem um jeitinho utilizando duas imagens iguas, que encontrei aqui no CSS Tricks. Usa-se uma boa e uma embaçada. Usando o CSS, pode por uma em cima do outro, assim:

inserir a descrição da imagem aqui

E o CSS:

body     { 
  background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap { 
  background: url(images/bg-blurry.jpg) no-repeat fixed;
  width: 500px; margin: 40px auto;
}

A chave sendo o fixed.

Atualização

Mesmo as duas imagens sendo possível, em CSS3 tem um meio com o atributo filter.

div {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(13px);
  filter: blur(0px);
}

Hoje (2015-07-20), CanIUse.com informa que apenas o IE e Opera Mini não apoiam esse atributo do CSS3.

3
0

backdrop-filter: blur(8px); vai ter o efeito desejado, exemplo simples e básico:

 <div class="backdrop-filter: blur(8px); background-color: rgba(100, 100, 100, 0.1); width: 100%">
  <h1>TEXTO</h1>
</div>
1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 6/10/2021 às 13:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .