Geek Answers Handbook

Element disappears if opacity is not set: 0.99

I created a responsive page with a box with text and a blurry background. The page is available here by JSFiddle .

The problem is this: the .content element is not displayed without setting its opacity to 0.99. Why?

HTML

 <div class="content-box"> <div class="content-bg"></div> <div class="content"> <p>Text with blurred background</p> <p>Text with blurred background</p> </div> </div>

CSS

 body { background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg'); background-color: black; background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; background-size: no-repeat fixed center center cover; overflow: hidden; } .content-box { position: relative; width: 300px; overflow: hidden; } .content-bg { position: absolute; background-size: cover; background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg'); background-color: black; background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; background-size: no-repeat fixed center center cover; filter: blur(5px); -webkit-filter: blur(5px); } .content { border-radius: 10px; z-index: 100; background-color: rgba(0, 0, 0, 0.7); opacity: 0.99999; /* Does not work without this wtf */ color: white; } .content :first-child { margin-top: 0px }

Js

 function updateBackground() { var contentBox = $(".content-box"); var bg = $(".content-bg"); bg.css("left", -(contentBox.offset().left)); bg.css("top", -(contentBox.offset().top)); bg.width($(window).width()); bg.height($(window).height()); } $(window).resize(function() { updateBackground(); }); updateBackground();
+5
source share
1 answer

Why doesn't code work without transparency?

This is because your content element is apparently behind the content-bg element. z-index does not work because the position property is not assigned to it.

Why does this work when opacity 0.99 is added?

As BoltClock mentioned in this answer , adding opacity less than 1 will automatically create a new stacking context (similar to adding a z-index to a positioned element). This brings the content element forward, and thus it is displayed.

What is the perfect solution?

Adding position: relative will cause the z-index to work as expected (which brings an element above content-bg ), and this will solve the problem.

 function updateBackground() { var contentBox = $(".content-box"); var bg = $(".content-bg"); bg.css("left", -(contentBox.offset().left)); bg.css("top", -(contentBox.offset().top)); bg.width($(window).width()); bg.height($(window).height()); } $(window).resize(function() { updateBackground(); }); updateBackground(); 
 body { background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg'); background-color: black; background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; background-size: no-repeat fixed center center cover; overflow: hidden; } .content-box { position: relative; width: 300px; overflow: hidden; } .content-bg { position: absolute; background-size: cover; background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg'); background-color: black; background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; background-size: no-repeat fixed center center cover; filter: blur(5px); -webkit-filter: blur(5px); } .content { position: relative; /* add this */ border-radius: 10px; z-index: 100; background-color: rgba(0, 0, 0, 0.7); color: white; } .content:first-child { margin-top: 0px } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-box"> <div class="content-bg"></div> <div class="content"> <p>Text with blurred background</p> <p>Text with blurred background</p> </div> </div>
+7
source

More articles:


All Articles