How to blur image in css without leaking? [duplicate]

Navigation
0

I would like to learn how to blur an image without leaking in Wordpress - See the example

How do you do it!

    
asked by anonymous 11.08.2018 / 00:24

1 answer

0

You can use two images, one with blur and another without, with a div to insert your text, see: 

.conteudo {
     width: 70%;
     height: 70%;
     border: 2px solid;
     border-radius: 20px;
     position: fixed;
     top: 15%;
     left: 15%;
     z-index :10;
     background-color: rgba(255, 255, 255, 0.2);
}
 .bg {
     width: 100%;
     height: 100%;
     background-image: url('https://spguia.melhoresdestinos.com.br/system/fotos_local/fotos/27924/show/jardim-botanico-de-curitiba.jpg');
     z-index: 2;
     position: fixed;
}
 .blurred {
     width:100%;
     height:100%;
     display:block;
     background-image:url('https://spguia.melhoresdestinos.com.br/system/fotos_local/fotos/27924/show/jardim-botanico-de-curitiba.jpg');
     z-index:1;
     position:absolute;
     top:-20%;
     left:-20%;
     padding-left:20%;
     padding-top:20%;
     -webkit-filter: blur(2px);
}
 .mascara {
     width: 70%;
     height: 70%;
     position: fixed;
     top: 15%;
     left: 15%;
     z-index:10;
     overflow:hidden;
}
<div class="bg"></div>
<div class="mascara">
    <div class="blurred"></div>
</div>
<div class="conteudo">
<center><h1>Visite Curitiba!</h1></center>
</div>
    
11.08.2018 / 00:33
Problems with Inner Join in Dapper Problems running Mysql function using Delphi FireDAC 10.1