CSS overlapping elements & opacity issue

by

Try and think of it like percentage sales. It’s a bit different, but the analogy gives sense of what’s happening. When a $10 item is 80% off, then you take off an additional 20%, it’s’ not 100% off (80% + 20%). You calculate final price like this: 

$10 * (1 - 0.8)  = $2 * (1 - 0.2) = $1.60.

50% opacity means, 50% of the light is blocked. So when you stack two 50% opacity elements, that means 50% of the light is blocked and 50% more light is blocked by the additional layer. Since only 50% light is coming through the first layer, only 50% of that additional light is blocked. So the calculation would be:

50% + (50% * 50%) = 75% opacity.

DEMO

.num2 {
    opacity: 0.75;
}

More Related Contents:

  1. How to remove the spaces between the form and the footer as shown below in the picture?
  2. How to change the cursor into a hand when a user hovers over a list item?
  3. What does the CSS rule “clear: both” do?
  4. CSS scoped custom property ignored when used to calculate variable in outer scope
  5. Why do the :before and :after pseudo-elements require a ‘content’ property?
  6. Select elements by attribute in CSS
  7. Hide text node in element, but not children
  8. How and where to use ::ng-deep?
  9. CSS transparent curved shape with two rounded sides
  10. Is the CSS :not() selector supposed to work with distant descendants?
  11. How to animate handwriting text on the web page using SVG?
  12. Combining :last-child with :not(.class) selector in CSS
  13. Using HTML data-attribute to set CSS background-image url
  14. What are `scrolling boxes`?
  15. CSS transition shorthand with multiple properties?
  16. CSS blur on background image but not on content [duplicate]
  17. Set position absolute and margin
  18. When using “height: 100vh” for the container, vertical scrollbar appears
  19. How can i stop jQuery mobile to apply styles to my specific form elements
  20. How can I reset a CSS-counter to the start-attribute of the given list
  21. Nesting pseudo-elements inside pseudo-elements
  22. Show / hide div on click with CSS
  23. Background color of tabs in shiny tabPanel
  24. Targeting position:sticky elements that are currently in a ‘stuck’ state
  25. Merging selectors from mixins
  26. Styling HTML and BODY selector to height: 100%; vs using 100vh
  27. How to preserve line breaks in block?
  28. CSS to stop text wrapping under image
  29. internet explorer font face ssl
  30. Styling the arrow on bootstrap tooltips [duplicate]

Leave a Comment