Ergebnis 1 bis 10 von 10

Thema: CSS Background halbtransparent

  1. #1
    Teeny
    Registriert seit
    01.11.2004
    Ort
    Elbental
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS Background halbtransparent

    Ich versuch schon seit ner ganzen weile das hinzubekommen aber finde irgendwie keine vernünftige Lösung.

    Ich möchte in einem Tooltip den Hintergrund Schwarz halbtransparent darstellen. Aber entweder es ist alles halbtransparent oder die Schrift ist Scharz und der hintergrund ganz transparent.

    dazu möchte ich verwenden:

    opacity : .3;
    filter : alpha(opacity=30);

    Mein eigentliches tooltip ist hier definiert

    .tooltip { position: absolute; display: none; }

    .content {
    background-color : black;
    border-top : 2px;
    border-right : 2px;
    border-bottom : 1px;
    border-left : 1px;
    padding : 2px;
    color: #3C57A7;
    font-size: 10px;
    border-color : olive;
    border-style : solid;
    text-align : center;
    }

    Logischerweise wenn ich opacity in .tooltip definiere ist alles halbtransparent.

    Hat jemand eine idee wie ich nur den Hintergrund Halbtransparent machen kann ohne dabei die Schrift die sich dann auf dem Hintergrund befindet mit durchsichtig zu machen?
    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
    Fortgeschrittene/r Avatar von SpeedFire
    Registriert seit
    01.07.2008
    Ort
    Meilsdorf
    Alter
    23
    Beiträge
    185
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Background halbtransparent

    gibt es schon Browser die opacity verstehen? ich kenn nur -moz-opacity für mozilla

    auf jedenfall machen diese Transparenzwerte immer alles im objekt transparent.
    Also musst du für den Text nochmal mit opacity sagen, dass es nicht transparent sein soll mit:
    Code:
    opacity:1.0;
    filter:alpha(opacity=100);
    Edit: Ich würde außerdem lieber ein Halbtransparents png reinmachen da es ältere Browser (außer IE) besser können
    Geändert von SpeedFire (24.10.2008 um 16:59 Uhr)
    br:^ n4:| ie:% mo:} va:} de:> zu:) fl:| ss:} ls:[ js:|
    Dieser Text ist nicht sinnlos, sondern sagt viel über mich aus!

  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: CSS Background halbtransparent

    ansonsten kannste dem hintergrund nen halbtransparentes png mitgeben und kacheln
    das klappt dann an sich auf jeden fall, nur für den ie6 und kleiner brauchste dann nen png-fix
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    Fortgeschrittene/r Avatar von SpeedFire
    Registriert seit
    01.07.2008
    Ort
    Meilsdorf
    Alter
    23
    Beiträge
    185
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Background halbtransparent

    *grübel* ich editier zu viel


    http://www.twinhelix.com/css/iepngfix/
    br:^ n4:| ie:% mo:} va:} de:> zu:) fl:| ss:} ls:[ js:|
    Dieser Text ist nicht sinnlos, sondern sagt viel über mich aus!

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    01.11.2004
    Ort
    Elbental
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Background halbtransparent

    Danke erstmal führ eure Antworten hilft mir schon mal sehr viel weiter, bin trotsdem noch am überlegen nach der vernünftigsten Variante. Das mit PNG Grafik funktioniert schon mal nicht im IE hab ich gerade getestet.

    Bei der opacity Variante bin ich noch am Testen aber irgendwie bekomm ichs nicht hin das beides funktioniert irgendetwas überschreibt immer das andere.
    Entweder ganz halbtransparent oder einfach schwarz.
    Dann kommt noch hinzu das IE und FF mal wieder nicht beide das gleiche anzeigen.

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: CSS Background halbtransparent

    es funktioniert im ie... also ab ie7 aufwärts... wie bereits erwähnt benötigst du ein png-fix, damit auch der ie6 halbtransparente png-bilder anzeigen kann
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    01.11.2004
    Ort
    Elbental
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Background halbtransparent

    Ja das hab ich schon gelesen aber das ist mir ehrlich gesagt nen bischen zuviel geflicke und viele haben den IE6 noch drauf.
    Davon abgesehen verwende ich PNG sehr ungern im Web.
    Habs ja getestet mit beiden browsern sogar mit IE6 und das mit dem opacity : .3; filter : alpha(opacity=30); funktioniert in beiden nur habe ich das problem das ich den Text innerhalb des Tooltips nicht von der habtransparenz wegbekomme.
    Wie Speedfire meinte ich soll den Text nochmal mit opacity sagen, dass es nicht transparent sein soll. Aber da der sich ja im transparenten tooltip befindet geht das ja nicht so ohne weiteres.
    Oder ich hab irgendwass übersehen.

  8. #8
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: CSS Background halbtransparent

    mmh haste evtl schomma probiert den text in ein div- oder span- oder p-tag zu stopfen?

    und mit dem png-fix is das gar nich so viel, einfach ne datei hochladen und via css referenzieren...
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    01.11.2004
    Ort
    Elbental
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Background halbtransparent

    Ja dann hebt sich das eine mit dem anderen gegenseitig auf im FF ist die Halbtransparenz stärker im IE ist es dann komplett untransparent.

  10. #10
    Fortgeschrittene/r Avatar von SpeedFire
    Registriert seit
    01.07.2008
    Ort
    Meilsdorf
    Alter
    23
    Beiträge
    185
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Background halbtransparent

    es gibt noch eine möglichkeit
    du nimmst ein png mit 50% transparents und schribst in den header
    HTML-Code:
    <!--[if lt IE 6]>
    <style type="text/css">
    /*transparentes Objekt*/{filter:alpha(opacity=50);}
    </style>
    <![endif]-->
    Setzt die Transparents bei IE 6 oder niedriger auf 50%
    Man kann auch versuchen das png fix in diesen ie6 tag zu schreiben
    br:^ n4:| ie:% mo:} va:} de:> zu:) fl:| ss:} ls:[ js:|
    Dieser Text ist nicht sinnlos, sondern sagt viel über mich aus!

Ähnliche Themen

  1. Halbtransparent?
    Von icecrusher777 im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 02.08.2008, 15:24
  2. Background CSS?
    Von XYZ im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 08.04.2007, 23:25
  3. background
    Von des-man im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 02.04.2007, 18:01
  4. Div im background?
    Von ad3nau im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 23.07.2006, 17:55
  5. Background
    Von mauritius im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 23.01.2003, 17:59

Stichworte

Berechtigungen

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