57291

CSS box-shadow on divs over image/video background impossible?

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>

Recommend

  • jQuery isotope plugin horizontal scrolling
  • How do I catch c0000005 exception from native dll in c#
  • How to get UIBarButtonItem center position
  • Is there an jQuery equivalent of MooTools Hash?
  • Vectors and abstract classes
  • Call json.Unmarshal inside UnmarshalJSON function without causing stack overflow
  • Setting inner div opacity to 1, but not effected
  • Dropdown menu with the dropdown-menu-right class does not align to the right
  • Looking for datastructure that maintains a size & purges older elements in the process
  • Change the width of the JQM panels
  • Ant: fileset “dir” attribute with a runtime expanded full path
  • Fixed Background Works in Chrome but Not Firefox?
  • css calendar - td background diagonal split - two colors
  • Enumerating Controls on a Form
  • Cut the background to expose the layer below
  • Floated image with variable width and heading with background image
  • order post according to custom array position
  • Adjust width of select element according to selected option's width
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Custom validator control occupying space even though display set to dynamic
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Change multiple background-images with jQuery
  • Avoid links criss cross / overlap in d3.js using force layout
  • CSS Linear-gradient formatting issue accross different browsers
  • What is the “return” in scheme?
  • Can Jackson SerializationFeature be overridden per field or class?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Change an a tag attribute in JavaScript based on screen width
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • jQuery tmpl and DataLink beta
  • Traverse Array and Display in markup
  • How to disable jQuery.jplayer autoplay?
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize