In div, how do I make the background transparent, but not the outline?

Question

Title says it all, I want to have the background at 50% opacity and the outline non-transparent.

div
{
opacity:0.5;
Border:1px solid #000000;
background-color:#000000;
}

Any help is appreciated.

See this question: http://stackoverflow.com/questions/13559188/element-opacity-but-not-border — user2923779, Dec 22 '13 at 22:21

score 3 · Accepted Answer · answered Dec 22 '13 at 22:19

3

Use rgba

the a is for opacity of the background... which can be 0 through 1 , 0 is invisible, 1 is fully visible..

div {
   background-color: rgba(0,0,0,.5);
   border: 1px solid black;
}

answered Dec 22 '13 at 22:19

CRABOLO

8,605
39
41
68

Freakin' lovely! Thanks a bunch. – Makkebakke Dec 22 '13 at 22:20

score 1 · Answer 2 · answered Dec 22 '13 at 22:22

setting opacity will automatically set anything related to that class, including outline and even child nodes.

You can use rgba() to make a semi-transparent background color.

like this:

background-color:#000000; //fall-back for old browsers that don't support rgba
background-color: rgba(0,0,0,0.5); //set background color. red=0, green=0, blue=0, alpha=0.5

http://css-tricks.com/rgba-browser-support/

In div, how do I make the background transparent, but not the outline?

2 Answers2