opacity problem

[Historical Forums User]

im trying to get the background of the slider to be semi transparent

http://uncutbeatz.com/clear

this is the full code im using…

.galleria-container {

margin: 0 auto;

width: 960px;

position: relative;

overflow: hidden;

background-color:#FFF;

filter: alpha(opacity=50);

}

.galleria-container img {

-moz-user-select: none;

-webkit-user-select: none;

-o-user-select: none;

}

.galleria-stage {

position: absolute;

top: 10px;

bottom: 60px;

left: 10px;

right: 10px;

overflow:hidden;

}

.galleria-thumbnails-container {

height: 50px;

bottom: 0;

position: absolute;

left: 10px;

right: 10px;

z-index: 2;

}

.galleria-carousel .galleria-thumbnails-list {

margin-left: 30px;

margin-right: 30px;

}

.galleria-thumbnails .galleria-image {

height: 40px;

width: 60px;

background: #000;

margin: 0 5px 0 0;

border: 1px solid #000;

float: left;

cursor: pointer;

}

.galleria-counter {

position: absolute;

bottom: 10px;

left: 10px;

text-align: right;

color: #fff;

font: normal 11px/1 arial,sans-serif;

z-index: 1;

}

.galleria-loader {

background: #000;

width: 20px;

height: 20px;

position: absolute;

top: 10px;

right: 10px;

z-index: 2;

display: none;

background: url(classic-loader.gif) no-repeat 2px 2px;

}

.galleria-info {

width: 50%;

top: 15px;

left: 15px;

z-index: 2;

position: absolute;

}

.galleria-info-text {

background-color: #000;

padding: 12px;

display: none;

/* IE7 */ zoom:1;

}

.galleria-info-title {

font: bold 12px/1.1 arial,sans-serif;

margin: 0;

color: #fff;

margin-bottom: 7px;

}

.galleria-info-description {

font: italic 12px/1.4 georgia,serif;

margin: 0;

color: #bbb;

}

.galleria-info-close {

width: 9px;

height: 9px;

position: absolute;

top: 5px;

right: 5px;

background-position: -753px -11px;

opacity: .5;

filter: alpha(opacity=50);

cursor: pointer;

display: none;

}

.notouch .galleria-info-close:hover{

opacity:1;

filter: alpha(opacity=100);

}

.touch .galleria-info-close:active{

opacity:1;

filter: alpha(opacity=100);

}

.galleria-info-link {

background-position: -669px -5px;

opacity: .7;

filter: alpha(opacity=70);

position: absolute;

width: 20px;

height: 20px;

cursor: pointer;

background-color: #000;

}

.notouch .galleria-info-link:hover {

opacity: 1;

filter: alpha(opacity=100);

}

.touch .galleria-info-link:active {

opacity: 1;

filter: alpha(opacity=100);

}

.galleria-image-nav {

position: absolute;

top: 50%;

margin-top: -62px;

width: 100%;

height: 62px;

left: 0;

}

.galleria-image-nav-left,

.galleria-image-nav-right {

background:#000;

opacity: .3;

filter: alpha(opacity=30);

cursor: pointer;

width: 62px;

height: 124px;

position: absolute;

left: 10px;

z-index: 2;

background-position: 0 46px;

}

.galleria-image-nav-right {

left: auto;

right: 10px;

background-position: -254px 46px;

z-index: 2;

}

.notouch .galleria-image-nav-left:hover,

.notouch .galleria-image-nav-right:hover {

opacity: 1;

filter: alpha(opacity=100);

}

.touch .galleria-image-nav-left:active,

.touch .galleria-image-nav-right:active {

opacity: 1;

filter: alpha(opacity=100);

}

.galleria-thumb-nav-left,

.galleria-thumb-nav-right {

cursor: pointer;

display: none;

background-position: -495px 5px;

position: absolute;

left: 0;

top: 0;

height: 40px;

width: 23px;

z-index: 3;

opacity: .8;

filter: alpha(opacity=80);

}

.galleria-thumb-nav-right {

background-position: -578px 5px;

border-right: none;

right: 0;

left: auto;

}

.galleria-thumbnails-container .disabled {

opacity: .2;

filter: alpha(opacity=20);

cursor: default;

}

.notouch .galleria-thumb-nav-left:hover,

.notouch .galleria-thumb-nav-right:hover {

opacity: 1;

filter: alpha(opacity=100);

background-color: #111;

}

.touch .galleria-thumb-nav-left:active,

.touch .galleria-thumb-nav-right:active {

opacity: 1;

filter: alpha(opacity=100);

background-color: #111;

}

.notouch .galleria-thumbnails-container .disabled:hover {

opacity: .2;

filter: alpha(opacity=20);

background-color: transparent;

}



.galleria-carousel .galleria-thumb-nav-left,

.galleria-carousel .galleria-thumb-nav-right {

display: block;

}

.galleria-thumb-nav-left,

.galleria-thumb-nav-right,

.galleria-info-link,

.galleria-info-close,

.galleria-image-nav-left,

.galleria-image-nav-right {

background-image: url(classic-map.png);

background-repeat: no-repeat;

}

.galleria-container {

margin: 0 auto;

width: 960px;

position: relative;

overflow: hidden;

background-color:#FFF;

filter: alpha(opacity=50);

}

this is what im using, it works fine in ie but not in firefox…
i tried using opacity: .5; which kinda works but it also makes the image within that container transparent..

any ideas where im going wrong?

[wolfcry911]

remove the opacity and use

background: rgba(255,255,255,0.5);

[Dreamdealer]

If you use an opacity setting on an element it makes the element semi-transparent, but also everything inside it. If you only want the background to be semi-transparent you can use the RGBA solution from @wolfcry911, but even safer (for older browsers) is to create a semi-transparent PNG image in photoshop (or something) and use that as a background for the element. This works in most browsers, except for IE6, but there are also fixes to get the PNG’s alpha channel working in IE6 too.

[Author]

Posts