57291
Question:
I'm having a superbgimage/jw player background on my website in progress. When I apply a CSS box-shadow on the content divs above the background, the shadow does not mix (does not darken) with the background. It looks like a grey halo. Do box-shadows only work on white backgrounds?
Halo instead of shadow mixing with background image (darkening it)
<img alt="Halo instead of shadow mixing with background image" class="b-lazy" data-src="https://i.stack.imgur.com/g5xYS.png" data-original="https://i.stack.imgur.com/g5xYS.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />
CSS for superbgimage background and jQuery Isotope plugin divs
#background {
background: inherit;
}
#superbgimage {
display: none;
}
.item {
margin-bottom: 4px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
Divs for background
<fieldset id="background">
<a href="media/background_0.jpg"></a>
<a href="media/background_1.jpg"></a>
<a href="media/background_2.jpg"></a>
...
</fieldset>
<div id="superbgimage"></div>
Script for background
<script type="text/javascript">
$(document).ready(function () {
$.fn.superbgimage.options = {
preload: 1,
randomtransition: 0,
slideshow: 1,
slide_interval: 9000,
randomimage: 1,
speed: 3000,
transition: 1
};
$('#background').superbgimage().hide();
});
</script>
Answer1:Make sure you are using a cross-browser solution like this:
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
Answer2:Use RGBA colors instead of HEX. RGBA will allow you to set an opacity for the color allowing the background to bleed through.
Example:
rgba(0,0,255,0.5)
On a side note, try using an online generator for CSS3 elements like box-shadow, it will take the guess work out of creating these more complex elements:
<a href="http://css3generator.com/" rel="nofollow">http://css3generator.com/</a>
