Basic CSS – how to overlay a DIV with semi-transparent DIV on top

Using CSS3 you don’t need to make your own image with the transparency.

Just have a div with the following

position:absolute;
left:0;
background: rgba(255,255,255,.5);

The last parameter in background (.5) is the level of transparency (a higher number is more opaque).

Example Fiddle

Related Posts:

  1. Failed to load resource: the server responded with a status of 404 (Not Found) css
  2. See answer keys in Google Form (quiz) source page?
  3. CSS Background Opacity [duplicate]
  4. CSS background-image-opacity?
  5. Resize image proportionally with CSS?
  6. How do I vertically align text in a div?
  7. Embed image in a
  8. Why does z-index not work?
  9. How do I vertically center text with CSS?
  10. Failed to load resource: the server responded with a status of 404 (Not Found) css
  11. How do I vertically center text with CSS?
  12. Can I have an onclick effect in CSS?
  13. How to style a checkbox using CSS
  14. Set cookie and get cookie with JavaScript
  15. CSS Background Image Not Displaying
  16. CSS `height: calc(100vh);` Vs `height: 100vh;`
  17. CSS: Moving the text down a few pixels but keeping the background still?
  18. Fix footer to bottom of page
  19. CSS no text wrap
  20. How to position text over an image in css
  21. shifting a piece of text down using CSS
  22. Display Two
  23. Add border-bottom to table row
  24. Bootstrap 4 Sticky Footer Not Sticking
  25. How to change css property using javascript
  26. Center form submit buttons HTML / CSS
  27. CSS: Moving the text down a few pixels but keeping the background still?
  28. How to use css first-child with :not()
  29. How can I make a CSS glass/blur effect work for an overlay?
  30. How to “crop” a rectangular image into a square with CSS?
  31. Should I use px or rem value units in my CSS?
  32. Flexbox: center horizontally and vertically
  33. Maintain the aspect ratio of a div with CSS
  34. How to draw diagonal lines with css
  35. How to keep footer at bottom of screen [duplicate]
  36. jQuery.addClass not working
  37. what’s the easiest way to put space between 2 side-by-side buttons in asp.net
  38. Vertically centering a div inside another div
  39. How do I set vertical space between list items?
  40. Does bootstrap 4 have a built in horizontal divider?
  41. Check if an element contains a class in JavaScript?
  42. How to move image with css/html
  43. How can I set the image opacity for body background
  44. How to style the option of an html “select” element?
  45. CSS pick a random color from array
  46. html div background image not showing up
  47. Bring element to front using CSS
  48. How to apply style classes to td elements?
  49. Align DIV’s to bottom or baseline
  50. how to overlap two div in css?
  51. Center a DIV horizontally and vertically
  52. how to overwrite css style
  53. How can I move this text up using CSS?
  54. Target a css class inside another css class
  55. CSS float right not working correctly
  56. How can I vertically align elements in a div?
  57. How to give spacing between buttons using bootstrap
  58. CSS hover effect is not working on my code
  59. Space between two rows in a table?
  60. How can I center a div within another div?
  61. How to align content of a div to the bottom
  62. How do I style a dropdown with only CSS?
  63. Remove scrollbar from iframe
  64. Make a div fill the height of the remaining screen space
  65. How to change the background-color of jumbrotron?
  66. Add image in title bar
  67. vertical divider between two columns in bootstrap
  68. Why an inline “background-image” style doesn’t work in Chrome 10 and Internet Explorer 8?
  69. What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?
  70. How to center a navigation bar with CSS or HTML?
  71. vertical-align with Bootstrap 3
  72. How to add image that is on my computer to a site in css or html?
  73. My CSS won’t link to my HTML file
  74. How do I align in my image to move it vertically up?(CSS,HTML)?
  75. How to use PHP inside css file
  76. Table fixed header and scrollable body
  77. css display table cell requires percentage width
  78. Setting a max character length in CSS
  79. Bootstrap Columns Not Working
  80. How to center an unordered list?
  81. How to write a:hover in inline CSS?
  82. CSS Resize/Zoom-In effect on Image while keeping Dimensions
  83. How to draw a trapezium/trapezoid with css3?
  84. External CSS not working
  85. How to exclude particular class name in CSS selector?
  86. HTML/CSS–Creating a banner/header
  87. How to create a text box in PHP to output data
  88. Change hover color on a button with Bootstrap customization
  89. Alternate table row color using CSS?
  90. Set textarea width to 100% in bootstrap modal
  91. Can I apply a CSS style to an element name?
  92. How to create a hidden in JavaScript?
  93. How can I make a div not larger than its contents?
  94. CSS “and” selector – Can I select elements that have multiple classes?
  95. position fixed is not working
  96. CSS: Background image and padding
  97. Place a button right aligned
  98. td widths, not working?
  99. Firefox CSS Animations Broke [closed]
  100. Main menu effect visited

Leave a Comment