filter Blur affecting other div

Asked

Viewed 73 times

1

how do pro filter only affect the div of the background, in case the wrapper and also how to remove that edge that he puts? the goal is to only obfuscate the image ta so

inserir a descrição da imagem aqui

#wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://blog.viajeglobal.com.br/wp-content/uploads/2014/09/toscana-italia-wallpaper_mini.jpg) no-repeat fixed;
  background-size: cover;
  filter: blur(10px);
 }

#chat {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px 10px;
  width: 64.28571428571429%;/*900*/
  height: 600px;
  background-color: rgba(0,0,0,0.5); 
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset 0 0 15px 10px rgba(0,0,0,0.8);
  border-radius: 5px;
  z-index: 9999;
 }
<div id="wrapper">

  <div id="chat">chat</div>

</div>

css css3

1 answer

2


To solve your problem initially separate the elements so that the div wrapper and chat are in the same structure, not one parent element of the other. From this you can manipulate your position by alternating the z-index, this already solves your first problem. For the white edges applied by the Blur effect, I believe that manipulating the background is the best solution because the inherited color affects the image, in the example below I used the black color to simulate the result.

/* A borda branca vem do background da página, manipulando essa cor você consegue alterar */
body {
  background-color: black; 
}

#wrapper {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://blog.viajeglobal.com.br/wp-content/uploads/2014/09/toscana-italia-wallpaper_mini.jpg) no-repeat fixed;
  background-size: cover;
  filter: blur(10px);
-webkit-filter: blur(10px);
  z-index: 1;
 }

#chat {
  background: rgba(0,0,0,0.7);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px 10px;
  width: 64.28571428571429%;/*900*/
  height: 600px;
  border-radius: 5px;
  position: fixed;
  z-index: 2;
  color: #fff;
 }
<body>
  <div id="wrapper"></div>
  <div id="chat">chat</div>
</body>

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.