borda de imagem semi-transparente

StackOverflow https://stackoverflow.com/questions/642130

  •  22-07-2019
  •  | 
  •  

Pergunta

Eu gostaria que a imagem a sangrar no div.imgborder recipiente e eu gostaria que o sangramento seja semitransparente (como um efeito de vidro opaco). Existe uma maneira de conseguir isso via CSS ou talvez definir uma imagem de fundo com alguma opacidade na div.imgborder? 

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
        'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title></title>

<meta name='keyword' content=''>
<meta name='description' content=''>

<link rel='stylesheet' href='reset.css'>

<style type='text/css'>
    body {
      background-color: #ccc;   
    }

    div#container {
      width: 960px;
      margin-left: auto; 
      margin-right: auto;
      margin-top: 50px;
    }

    img#myimg {
      overflow: visible;
    }

    div.imgborder {
      background-color: #222;
      opacity: 0.9;
      width: 160px;
      height: 160px;
      padding: 10px;
    }


</style>

</head>
<body>
    <div id='container'>

        <div class='imgborder' align='center'>
            <img src='bar.jpg' alt='' width='160' height='160' id='myimg' />
        </div>

    </div>
</body>
</html>
Foi útil?

Solução

Você pode criar um arquivo PNG com o efeito semi-transparente você gosta e adicione como pano de fundo. Qualquer navegador moderno este vai processar corretamente e criar o efeito desejado.

Outras dicas

Gecko e WebKit suporte configuração rgba () como uma propriedade border-color, assim que você poderia potencialmente definido: 

border-color: rgba(255,255,255,0.42);

.. e têm uma fronteira que é semi-transparente.

Para realizar o sangramento, no entanto, você provavelmente vai precisar sobrepor uma div transparente sobre a imagem e dar-lhe uma largura e altura igual à largura e altura da imagem menos a largura da borda. Então, se a imagem é 200x200, e você quer uma borda de 2px, você provavelmente vai ter que fazer a div 196x196 desde os ditames modelo caixa que a fronteira largura é adicionado à largura / dimensões de altura.

este foi js e css solução, mas vale a pena mencionar

Glassbox-JS

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top