Skip to content
Fix Code Error

CSS Background Opacity

March 13, 2021 by Code Error
Posted By: Anonymous

I am using something similar to the following code:

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

I expected this to make the background have an opacity of 0.4 and the text to have 100% opacity. Instead they both have an opacity of 0.4.

Solution

Children inherit opacity. It’d be weird and inconvenient if they didn’t.

You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color.

Example, 50% faded black background:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>
Answered By: Anonymous

Related Articles

  • Programmatically Lighten or Darken a hex color (or rgb, and…
  • Active tab issue on page load HTML
  • Having trouble with my nav bar/header, It used to work but…
  • Convert RGBA PNG to RGB with PIL
  • Adobe XD to responsive html
  • Javascript and css animation
  • Web colors in an Android color xml resource file
  • Navbar not filling width of page when reduced to mobile view
  • How to show title in hover - css / jquery
  • Increasing size of semi circle using css

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Delete column from pandas DataFrame

Next Post:

How do I merge two dictionaries in a single expression (taking union of dictionaries)?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error