0

I have two divs. where div1 has background color and image pattern and div2 is overlaid which has transparent background color, I want div2 background to be blur but not it's content.

I researched a lot but couldn't find similar example.

.container {
  width: 400px;
  height: 300px;
  background-color: #3d3d3d;
  position: relative;
  background-image: url('https://i.stack.imgur.com/Kpp7i.png');
  background-repeat: repeat;
  background-size: 50%;
}

.chat {
  color: green;
  line-height: 28px;
}

.type {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(45, 45, 45, 0.45);
  color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  box-sizing: border-box;
  line-height: 20px;
}
<div class="container">
  <div class="chat">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and
  </div>
  <div class="type">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'unchanged.
  </div>
</div>

Something like this: enter image description here

Stickers
  • 75,527
  • 23
  • 147
  • 186
dvalish
  • 36
  • 1
  • 3
  • 1
    There are lots of simmilar questions floating around, and it generally comes down to either css `backdrop-filter` (Which doesn't have much supported yet, and may or may not end up in the spec) or CSS `filter: blur()` which you will need to use with some layout trickery to give the appearance of a blurred background. – DBS Feb 26 '19 at 17:29
  • Like @DBS said the best way would be with webkit and backdrop-filter which has very minimal support in different browsers, a good workaround would've been using the answer here https://stackoverflow.com/a/38543010/8952861/. but seeing as your text is also there in the element that will not be blurred – boom Feb 27 '19 at 05:43

1 Answers1

0

There are a variety of articles that cover this, here's one that should work:

How can I make a CSS glass/blur effect work for an overlay?

  1. Set up your image.
  2. Create a div that will be placed over that, that's your overlay.
  3. Use rgba (the a sets opacity), something like this: background: rgba(34,34,34,0.75);

References:

  1. https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
  2. How can I make a CSS glass/blur effect work for an overlay?
Dani Amsalem
  • 1,266
  • 17
  • 26