How do I make a semi transparent background

Question

I need to make a white background 50  transparent without affecting anything else  How do I do it

User · Answer

Good to know  Some web browsers have difficulty to render text with shadows on top of transparent background  Then you can use a semi transparent 1x1 PNG image as a background    Note  Remember that IE6 don   t support PNG files

User · Answer

Although dated  not one answer on this thread can be used universally  Using rgba to create transparent color masks - that doesn t exactly explain how to do so with background images    My solution works for background images or color backgrounds     x000D   x000D   parent   x000D      font-family   Open Sans Condensed   sans-serif  x000D      font-size  19px  x000D      text-transform  uppercase  x000D      border-radius  50   x000D      margin  20px auto  x000D      width  125px  x000D      height  125px  x000D      background-color   476172  x000D      background-image  url  https   unsplash it 200 300  random    x000D      line-height  29px  x000D      text-align center  x000D    x000D   x000D   content   x000D      color  white  x000D      height  125px  important  x000D      width  125px  important  x000D      display  table-cell  x000D      border-radius  50   x000D      vertical-align  middle  x000D      background  rgba 0 0 0   3   x000D    x000D   lt h1 id  parent  gt  lt a href    id  content  title  content  rel  home  gt Example lt  a gt  lt  h1 gt  x000D   x000D   x000D

User · Answer

DO NOT use a 1x1 semi transparent PNG  Size the PNG up to 10x10  100x100  etc  Whatever makes sense on your page   I used a 200x200 PNG and it was only 0 25 kb  so there s no real concern over file size here    After visiting this post  I created my web page with 3  1x1 PNGs with varying transparency    Dreamweaver CS5 was tanking  I was having flash backs to DOS    Apparently any time I tried to scroll  insert text  basically do anything  DW was trying to reload the semi transparent areas 1x1 pixel at a time     YIKES   Adobe tech support didn t even know what the problem was  but told me to rebuild the file  it worked on their systems  incidentally   It was only when I loaded the first transparent PNG into the css file that the doc dove deep again   Then I found a post on another help site about PNGs crashing Dreamweaver  Size your PNG up  there s no downside to doing so

User · Answer

This is simple and sort  Use hsla css function like below  transparent      background-color  hsla 0 0  4   4

User · Answer

This works  but all the children of the element with this class will also become transparent  without any way of preventing that    css-class-name       opacity 0 8

User · Answer

Use rgba      transparent     background-color  rgba 255 255 255 0 5       This will give you 50  opacity while the content of the box will continue to have 100  opacity   If you use opacity 0 5  the content will be faded as well as the background  Hence do not use it

User · Answer

div main       width 100        height 550px       background  url  https   images unsplash com photo-1503135935062-      b7d1f5a0690f ixlib rb-enter code here0 3 5 amp ixid eyJhcHBfaWQiOjEyMDd9 amp s cf4d0c234ecaecd14f51a2343cc89b6c amp dpr 1 amp auto format amp fit crop amp w 376 amp h 564 amp q 60 amp cs tinysrgb   no-repeat       background-position center       background-size cover     div main gt div       width 100px       height 320px       background transparent       background-attachment fixed       border-top 25px solid orange       border-left 120px solid orange       border-bottom 25px solid orange       border-right 10px solid orange       margin-left 150px

User · Answer

If you want to make transparent background is gray  pls try       transparent         background rgba 1 1 1 0 5

User · Answer

Try this    transparent      opacity  50    -moz-opacity  50     filter alpha opacity 50

[css] How do I make a semi transparent background?

Examples related to css