CSS Background Opacity

Question

I am using something similar to the following code     lt div style  opacity 0 4  background-image url        gt       lt div style  opacity 1 0   gt          Text      lt  div gt   lt  div gt    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

User · Answer

This is because the inner div has 100  of the opacity of the div it is nested in  which has 40  opacity    In order to circumvent it  there are a few things you could do   You could create two separate divs like so    lt div id  background  gt  lt  div gt   lt div id  bContent  gt  lt  div gt    Set your desired CSS opacity and other properties for the background and use the z-index property  z-index  to style and position the bContent div  With this you can place the div overtope of the background div without having it s opacity mucked with     Another option is to RGBa  This will allow you to nest your divs and still achieve div specific opacity     The last option is to simply make a semi transparent  png image of the color you want in your desired image editor of choice  set the background-image property to the URL of the image and then you won t have to worry about mucking about with the CSS and losing the capability and organization of a nested div structure

User · Answer

I would do something like this   lt div class  container  gt     lt div class  text  gt       lt p gt text yay  lt  p gt     lt  div gt   lt  div gt    CSS    container       position  relative      container  before       position  absolute      top  0      left  0      bottom  0      right  0      background  url   path to image png        opacity   4      content          z-index  -1      It should work  This is assuming you are required to have a semi-transparent image BTW  and not a color  which you should just use rgba for   Also assumed is  that you can t just alter the opacity of the image beforehand in Photoshop

User · Answer

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    x000D   x000D   lt div style  background-color rgba 0  0  0  0 5    gt  x000D      lt div gt  x000D        Text added  x000D      lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

transbg    Fallback for web browsers that don t support RGBa    background-color  rgb 0  0  0      RGBa with 0 6 opacity    background-color  rgba 0  0  0  0 6      For IE 5 5 - 7   filter progid DXImageTransform Microsoft gradient startColorstr  99000000  endColorstr  99000000      For IE 8   -ms-filter   progid DXImageTransform Microsoft gradient startColorstr  99000000  endColorstr  99000000

User · Answer

Just make sure to put width and height for the foreground the same with the background  or try to have top  bottom  left and right properties    lt style gt       foreground   background           position  absolute             foreground           z-index  1             background           background-image  url your image here jpg           opacity  0 4         lt  style gt    lt div class  foreground  gt  lt  div gt   lt div class  background  gt  lt  div gt

User · Answer

You can use CSS 3  before to have a semi-transparent background and you can do this with just one container  Use something like this   lt article gt    Text   lt  article gt    Then apply some CSS  article     position  relative    z-index  1     article  before     content        position  absolute    top  0     left  0    width  100      height  100       opacity   4     z-index  -1    background  url path to your image       Sample  http   codepen io anon pen avdsi  Note  You might need to adjust the z-index values

User · Answer

You can use Sass  transparentize   I found it to be the most useful and plain to use   transparentize rgba 0  0  0  0 5   0 1    gt  rgba 0  0  0  0 4  transparentize rgba 0  0  0  0 8   0 2    gt  rgba 0  0  0  0 6     See more   transparentize  color   amount    Sass  Script  Value  Color

User · Answer

The following methods can be used to solve your problem    CSS alpha transparency method  doesn t work in Internet nbsp Explorer nbsp 8     div background-color rgba 255 0 0 0 5     Use a transparent PNG image according to your choice as background  Use the following CSS code snippet to create a cross-browser alpha-transparent background  Here is an example with  000000   0 4  opacity   div       background rgb 0 0 0       background  transparent 9      background rgba 0 0 0 0 4       filter progid DXImageTransform Microsoft gradient startColorstr  66000000 endColorstr  66000000       zoom  1     div nth-child n        filter  none       For more details regarding this technique  see this  which has an online CSS generator

[html] CSS Background Opacity

Examples related to html

Examples related to css

Examples related to opacity