- This topic is empty.
-
AuthorPosts
-
August 21, 2011 at 10:52 am #34008Historical Forums UserParticipant
im trying to get the background of the slider to be semi transparent
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?
August 21, 2011 at 11:45 am #85347wolfcry911Participantremove the opacity and use
background: rgba(255,255,255,0.5);
August 22, 2011 at 4:49 am #85373DreamdealerMemberIf 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.