halbtransparente boxen mit nichttransparentem text

Speedy

hi! ich möchte auf einem myspace-profil die boxen halbtransparent erscheinen lassen, so dass das hintergrundbild durchschimmert. hab auch schon codes gefunden, mit denen man das machen kann, nur dann sind leider alle elemente (text etc.) in den boxen ebenfalls halbtransparent. wie kann man letzteres unterbinden? wäre für hilfe dankbar...

code ohne transparenz-effekt:

CSS

<style type="text/css">
body {
	background-color: rgb(255, 255, 255);
	background-image: url(http://img163.imageshack.us/img163/6982/2492c2dff2dc2c56a7f926d78d6cfa41in8.jpg);
	background-position: top left;
	background-repeat: repeat;
	background-attachment: fixed;
	}
table, tr, td {
	background-color: transparent;
	border: 0px;
	}


table table {
	border: 0px;
	}
table table table table{
	border:0px;
	}
table table table {
	border-width: 0px;
	border-color: rgb(102, 102, 102);
	border-style: solid;
	background-color: transparent;
	}
table table table td {
	background-color: rgb(200, 210, 225);
	filter:alpha(100);
	..-opacity:1;
	opacity:1;
	-khtml-opacity:1;
	}
table table table table td {
	filter:none;
	}</style><div style="position:absolute;top:90px;left:0px;padding:0px;margin:0px;"></div><style type="text/css">
body, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .btext, .text, .nametext, .blacktext10, .blacktext12 {
	font-family: Arial;
	font-size: 12px;
	color: rgb(0, 39, 150);
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	}
.nametext {
	padding: 5px;
	font-family: Arial;
	font-size: 18px;
	color: rgb(245, 100, 0);
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	display: block;
	}


.newtext {
            font-family: Arial;
	font-size: 12px;
	color: rgb(0, 39, 150);
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
            }
.whitetext12, .orangetext15 {
	font-family: Arial;
	font-size: 12px;
	color: rgb(245, 100, 0);
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	}
a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.man:link, a.man:active, a.man:visited, a.man:hover, a, a:link, a:active, a:visited, a:hover, a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.text:link, a.text:active, a.text:visited, a.text:hover, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited, a.redlink:hover {
	color: rgb(0, 51, 153);
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	}
a.navbar:hover, a.man:hover, a:hover {
	color: rgb(204, 0, 0);
	font-weight: bold;
	font-style: normal;
	text-decoration: underline;
	}
.badge {
	position: absolute;
	left: 1px;
	top: 1px;
	}
</style>






text










<style type="text/css">  td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}  td.text td.text table {background-color:transparent;}  td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}  td.text td.text table table td {padding:3;}  td.text td.text table table br {display:inline;}  </style>


<style type="text/css">.contactTable {width:300px !important; height:150px !important; padding:0px !important;background-image:url(http://www.killerkiwi.net/files/myspace/contact-tables/gradient-pad-1.jpg);background-attachment:scroll; background-position:center center;background-repeat:no-repeat; background-color:transparent;}.contactTable table, table.contactTable td { padding:0px !important;border:0px; background-color:transparent; background-image:none;}.contactTable a img {visibility:hidden; border:0px !important;}.contactTable a {display:block; height:28px; width:115px;}.contactTable .text {font-size:1px !important;}.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}</style>
</div>

Alles anzeigen

Speedy

also wie's aussieht macht man das am besten, indem man anstatt einer hintergrundfarbe für die boxen einfach ein halbtransparentes png-bild nimmt...

d4f

1 oder 2px bild und das ueber background-image sowie opacity auf den gewünschten Wert bringen. Achtung: opacity wird nicht von allen Browsern unterstuetzt, da es bis jetzt nur im CSS3-Vorschlag enthalten ist und nicht offiziell ist.

MfG
Daniel

des-man

dito,
das würde ich mit opacity lösen!
Notfalls musste dir bei zB....

http://www.pimp-my-profile.com/generators/myspace.php

...den Quellencode inkl Opacity erstellen...ich habe keine ahrnung, wie das bei myspace läuft, ob man da alles an html und css verwenden kann oder nich;
müsste eigentlich aber mit opacity gehn.

desman

driver

für mozilla gibts noch -moz-opacity:0.5;.
am besten beides verwenden.... muss dann aber evtl
anpassen, a wenn se sich überschneiden gewisse
unterschiede entstehen...

Speedy

danke für die antworten!

den opacity-code hatte ich anfangs schon probiert, aber da hat man dann eben das problem, dass nicht nur die hintergrundfarbe der boxen, sondern auch sämtliche elemente in den boxen halbtransparent werden!
die wohl einzigste lösung ist, wie bereits genannt, die verwendung eines halbtransparenten png-bilds, welche die gewünschte hintergrundfarbe enthält, anstatt die hintergrundfarbe der boxen mittels code zu erzielen.
der myspace-generator von pimp-my-profile.com hat tatsächlich ne funktion, wo man dann ganz bequem die farbe und gewünschten opacity-wert wählen kann und der code, der dann erzeugt wird, verweist letztlich einfach auf ein entsprechendes png...siehe hier:

Code

table table table { 
  border-style:Solid; 
 border-width:1px; 
 border-color:ffffff; 
 background-image:url(http://content.pimp-my-profile.com/tp/c8d2e1-60-tp.png); 
 background-repeat:repeat; 
 background-attachment:fixed; 
 }

halbtransparente boxen mit nichttransparentem text

Tags

Benutzer online in diesem Thema