CODEWITHSUNDEEP
htmlcss
Navneet
Navneet

Reputation: 9828

Translucent background color with opaque border

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!

Upvotes: 2

Views: 2734

Answers (2)

Stuart Burrows
Stuart Burrows

Reputation: 10814

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!

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

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

Upvotes: 3

Related Questions