2

I'm trying to create a div which where I can set the opacity for the background-color to be < 1. The border though should be totally opaque.

This is what I have as of now.

#level_highlight { 
    position: absolute;
    display: none;

    border:5px solid gray;
    background-color: #00FFFF; 
    -webkit-box-shadow: 0px 0px 4px #ffffff; 
       -moz-box-shadow: 0px 0px 4px #ffffff; 
            box-shadow: 0px 0px 4px #ffffff; 

   opacity: 0.4;
   filter:alpha(opacity=40); /* IE's opacity*/

   -webkit-border-radius: 12px; 
      -moz-border-radius: 12px; 
           border-radius: 12px; 

      -moz-background-clip: padding; 
   -webkit-background-clip: padding-box; 
           background-clip: padding-box;    
}

Could somebody suggest what I should change to manage it?

Thanks!

Navneet
  • 9,590
  • 11
  • 34
  • 51
  • Wrong tags, you should classify this as "css" and "html". However, i posted an answer, see below. – aaaaaa Oct 08 '11 at 11:14

2 Answers2

3

Remove opacity and filter, and put background-color: rgba(0,255,255,0.4) instead.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
0

You can't use opacity if you will be using a single element - you would need to have a border on an element that wrapped a second element which had the opacity set. Also bear in mind that any text content will become semi-transparent as well.

Another option is to use a alpha filter on the colour. You can do this with IE support by using a gradient filter. Example here: http://jsfiddle.net/dXmQk/

On the filter there is this 'hex code' #9900FFFF - the first two digits indicate the level of transparency

Hope that helps!

Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33