Ergebnis 1 bis 6 von 6

Thema: halbtransparente boxen mit nichttransparentem text

  1. #1
    Youngster
    Registriert seit
    24.05.2007
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard halbtransparente boxen mit nichttransparentem text

    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:

    Code:
    <style type="text/css">
    body &#123;
    	background-color&#58; rgb&#40;255, 255, 255&#41;;
    	background-image&#58; url&#40;http&#58;//img163.imageshack.us/img163/6982/2492c2dff2dc2c56a7f926d78d6cfa41in8.jpg&#41;;
    	background-position&#58; top left;
    	background-repeat&#58; repeat;
    	background-attachment&#58; fixed;
    	&#125;
    table, tr, td &#123;
    	background-color&#58; transparent;
    	border&#58; 0px;
    	&#125;
    
    table table &#123;
    	border&#58; 0px;
    	&#125;
    table table table table&#123;
    	border&#58;0px;
    	&#125;
    table table table &#123;
    	border-width&#58; 0px;
    	border-color&#58; rgb&#40;102, 102, 102&#41;;
    	border-style&#58; solid;
    	background-color&#58; transparent;
    	&#125;
    table table table td &#123;
    	background-color&#58; rgb&#40;200, 210, 225&#41;;
    	filter&#58;alpha&#40;100&#41;;
    	..-opacity&#58;1;
    	opacity&#58;1;
    	-khtml-opacity&#58;1;
    	&#125;
    table table table table td &#123;
    	filter&#58;none;
    	&#125;</style><div style="position&#58;absolute;top&#58;90px;left&#58;0px;padding&#58;0px;margin&#58;0px;"></div><style type="text/css">
    body, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .btext, .text, .nametext, .blacktext10, .blacktext12 &#123;
    	font-family&#58; Arial;
    	font-size&#58; 12px;
    	color&#58; rgb&#40;0, 39, 150&#41;;
    	font-weight&#58; normal;
    	font-style&#58; normal;
    	text-decoration&#58; none;
    	&#125;
    .nametext &#123;
    	padding&#58; 5px;
    	font-family&#58; Arial;
    	font-size&#58; 18px;
    	color&#58; rgb&#40;245, 100, 0&#41;;
    	font-weight&#58; bold;
    	font-style&#58; normal;
    	text-decoration&#58; none;
    	display&#58; block;
    	&#125;
    
    .newtext &#123;
                font-family&#58; Arial;
    	font-size&#58; 12px;
    	color&#58; rgb&#40;0, 39, 150&#41;;
    	font-weight&#58; bold;
    	font-style&#58; normal;
    	text-decoration&#58; none;
                &#125;
    .whitetext12, .orangetext15 &#123;
    	font-family&#58; Arial;
    	font-size&#58; 12px;
    	color&#58; rgb&#40;245, 100, 0&#41;;
    	font-weight&#58; bold;
    	font-style&#58; normal;
    	text-decoration&#58; none;
    	&#125;
    a.navbar&#58;link, a.navbar&#58;active, a.navbar&#58;visited, a.navbar&#58;hover, a.man&#58;link, a.man&#58;active, a.man&#58;visited, a.man&#58;hover, a, a&#58;link, a&#58;active, a&#58;visited, a&#58;hover, a.navbar&#58;link, a.navbar&#58;active, a.navbar&#58;visited, a.navbar&#58;hover, a.text&#58;link, a.text&#58;active, a.text&#58;visited, a.text&#58;hover, a.searchlinksmall&#58;link, a.searchlinksmall&#58;active, a.searchlinksmall&#58;visited, a.searchlinksmall&#58;hover, a.redlink&#58;link, a.redlink&#58;active, a.redlink&#58;visited, a.redlink&#58;hover &#123;
    	color&#58; rgb&#40;0, 51, 153&#41;;
    	font-weight&#58; bold;
    	font-style&#58; normal;
    	text-decoration&#58; none;
    	&#125;
    a.navbar&#58;hover, a.man&#58;hover, a&#58;hover &#123;
    	color&#58; rgb&#40;204, 0, 0&#41;;
    	font-weight&#58; bold;
    	font-style&#58; normal;
    	text-decoration&#58; underline;
    	&#125;
    .badge &#123;
    	position&#58; absolute;
    	left&#58; 1px;
    	top&#58; 1px;
    	&#125;
    </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 &#123;display&#58;none;&#125;  td.text td.text table &#123;background-color&#58;transparent;&#125;  td.text td.text table td, td.text td.text table &#123;height&#58;0;padding&#58;0;border&#58;0;&#125;  td.text td.text table table td &#123;padding&#58;3;&#125;  td.text td.text table table br &#123;display&#58;inline;&#125;  </style>
    
    <style type="text/css">.contactTable &#123;width&#58;300px !important; height&#58;150px !important; padding&#58;0px !important;background-image&#58;url&#40;http&#58;//www.killerkiwi.net/files/myspace/contact-tables/gradient-pad-1.jpg&#41;;background-attachment&#58;scroll; background-position&#58;center center;background-repeat&#58;no-repeat; background-color&#58;transparent;&#125;.contactTable table, table.contactTable td &#123; padding&#58;0px !important;border&#58;0px; background-color&#58;transparent; background-image&#58;none;&#125;.contactTable a img &#123;visibility&#58;hidden; border&#58;0px !important;&#125;.contactTable a &#123;display&#58;block; height&#58;28px; width&#58;115px;&#125;.contactTable .text &#123;font-size&#58;1px !important;&#125;.contactTable .text, .contactTable a, .contactTable img &#123;filter&#58;none !important;&#125;</style>
    </div>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Youngster
    Themenstarter

    Registriert seit
    24.05.2007
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

  3. #3
    König(in) Avatar von d4f
    Registriert seit
    22.04.2007
    Ort
    Luxemburg
    Beiträge
    1.493
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    Wir sind alle ein BOFH:

  4. #4
    Samurai
    Registriert seit
    21.03.2007
    Beiträge
    237
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  5. #5
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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...
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    24.05.2007
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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 &#123; 
      border-style&#58;Solid; 
     border-width&#58;1px; 
     border-color&#58;ffffff; 
     background-image&#58;url&#40;http&#58;//content.pimp-my-profile.com/tp/c8d2e1-60-tp.png&#41;; 
     background-repeat&#58;repeat; 
     background-attachment&#58;fixed; 
     &#125;

Ähnliche Themen

  1. div boxen verschieben
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 16.09.2007, 00:20
  2. halbtransparente grafik
    Von driver im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 13
    Letzter Beitrag: 08.04.2007, 20:23
  3. Halbtransparente Gif-Grafik GIMP
    Von DarkSyranus im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 6
    Letzter Beitrag: 07.11.2006, 17:57
  4. <div> Boxen anpassen
    Von webnewcomer im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 25.02.2006, 23:49
  5. css Boxen durcheinander
    Von Tony im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 24.11.2005, 16:00

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •