There is a div with a blurred background image, if you insert text from the top, it is also blurred, you need to prevent the text from being blurred. I played with z-index , it did not work.

 div { height: calc(100vh - 0.97rem); background: silver url('http://blog.routeperfect.com/wp-content/uploads/2016/04/shutterstock_172557722.jpg'); -webkit-filter: blur(1px); filter: blur(1px); font-size: 2rem; text-align: center; } 
 <div>Lorem Ipsum</div>

1 answer 1

 * { margin: 0; } .items { position: relative; width: 200px; height: 200px; } .item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } img { max-width:100%; filter: blur(2px); } p{ font-weight: bold; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; } 
 <div class="items"> <div class="item"> <img src="http://st.gde-fon.com/wallpapers_original/wallpapers/446464_(www.Gde-Fon.com).jpg" alt=""> </div> <div class="item"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae incidunt fugiat suscipit tenetur vel reprehenderit sapiente praesentium, labore ullam consequuntur. </p> </div> </div>

  • I recommend inserting something else like this, otherwise it is difficult to read the text: p { font-weight: bold; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; } p { font-weight: bold; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; } p { font-weight: bold; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; } - SamYonnou
  • one
    @SamYonnou added - user33274 4:26 pm