Anton Brass: Eigenschaften eines Background-Iamges

Servus!

Hauptintention ist über durch CSS transparentes Bild Text zu schreiben.

Für die Durchsichtigkeit des Bildes habe ich eine Klasse erstellt:

.transparent
{
 filter:alpha(opacity=50);
 -moz-opacity:.5;
}

Diese Klasse habe ich einer Spalte beigefügt die als Hintergrundgrafik das Bild gesezt hat, über welches ich meinen Text schreiben will:

<table>
<tr>
<td style='background-image:url(Bild.gif)' class='transparent'>
Mein Text
</td>
</tr>
</table>

Das Problem dabei ist, dass der Text natürlich auch transparent wird,  auch wenn ich diesem mit hilfe eines fonts folgendes zuweise:

.full
{
 filter:alpha(opacity=100);
 -moz-opacity:1;
}

Meine Frage ist nun, ob es entweder einen Befehl gibt, mit dessen Hilfe ich Text über ein Bild positionieren kann (was ich net gefunden habe) oder ob man dem background-image die Klasse direkt zuweisen kann. Eventuel könnte man auch per Javascript das Bild zunächst in ein Objekt laden, und dessen Eigenschaften verändern (class) und dieses Bild der Spalte als Hintergrundgrafik zuweisen?! Kann mir da jemand weiterhelfen?

Gruß

Anton

  1. Hallo Anton.

    Hauptintention ist über durch CSS transparentes Bild Text zu schreiben.

    Und das heißt auf Deutsch?

    Das Problem dabei ist, dass der Text natürlich auch transparent wird,  auch wenn ich diesem mit hilfe eines fonts folgendes zuweise:

    Mit Hilfe eines was?

    Meine Frage ist nun, ob es entweder einen Befehl gibt, mit dessen Hilfe ich Text über ein Bild positionieren kann (was ich net gefunden habe) oder ob man dem background-image die Klasse direkt zuweisen kann.

    Warum sollte einem Hintergrundbild eine Klasse zugewiesen werden?

    Auch wenn ich nicht ganz verstehe, was du eigentlich willst, glaube ich doch ein paar nützliche Archivthreads für dich zu haben:

    -moz-opacity nur für Background

    Transparenz nicht erben...

    Alpha-Filter für DIVs (bitte ohne Vererbung)

    Einen schönen Montag noch.

    Gruß, Ashura

    --
    Last Tears Keep Calling
    See Angels Falling
    Black Shadows In Your Head
    And One Eye For The Dead
    1. Nope, die helfen mir nicht weiter. Es scheint so, dass ein Objekt seine Teiltransparenz an alle Unterobjekte vererbt

  2. Hi,

    .transparent
    {
    filter:alpha(opacity=50);
    -moz-opacity:.5;

    Warum verwendest Du -moz-opacity statt opacity? Die Geckos unterstützen schon ziemlich lange opacity.

    }
    Diese Klasse habe ich einer Spalte beigefügt die als Hintergrundgrafik das Bild gesezt hat, über welches ich meinen Text schreiben will:

    Da Du ja wohl nur das Bild teiltransparent haben willst - warum benutzt Du nicht ein teiltransparentes Hintergrundbild (png mit Alpha-Kanal)?
    Würgarounds für IE gibt's dafür ja wohl auch (Google sollte Dir helfen).

    Das Problem dabei ist, dass der Text natürlich auch transparent wird,  auch wenn ich diesem mit hilfe eines fonts folgendes zuweise:

    Ja, so ist opacity definiert.

    Meine Frage ist nun, ob es entweder einen Befehl gibt, mit dessen Hilfe ich Text über ein Bild positionieren kann (was ich net gefunden habe) oder ob man dem background-image die Klasse direkt zuweisen kann.

    Nein, CSS-Eigenschaften können keine Klassen zugewiesen werden. Aber Teiltransparenz (bzw. Teil-Opazität) kann einem Bild mit einem geeigneten Graphikprogramm eingeimpft werden.

    Eventuel könnte man auch per Javascript das Bild zunächst in ein Objekt laden, und dessen Eigenschaften verändern (class) und dieses Bild der Spalte als Hintergrundgrafik zuweisen?!

    Mit Javascript kannst Du letztlich auch nichts anderes machen als mit HTML/CSS direkt (von zeitlichen Abläufen mal abgesehen)

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  3. Hallo,

    Hauptintention ist über durch CSS transparentes Bild Text zu schreiben.

    dieser Satz ist ziemlich konfus. Hätte man bestimmt etwas verständlicher formulieren können. ;-)

    Für die Durchsichtigkeit des Bildes habe ich eine Klasse erstellt:

    .transparent
    {
    filter:alpha(opacity=50);
    -moz-opacity:.5;
    }

    Also brauchst du irgendwo ein Element <img src="..." class="transparent">, wobei der Klassenname ungünstig gewählt ist. Er läuft Gefahr, mit der CSS-Eigenschaft transparent verwechselt zu werden. Cheatah würde sagen: Wähle Klassennamen nie aufgrund der gewünschten Darstellung, sondern höchstens aufgrund des Sinngehalts des zugehörigen Elements.

    Diese Klasse habe ich einer Spalte beigefügt die als Hintergrundgrafik das Bild gesezt hat, über welches ich meinen Text schreiben will:

    Das ist Unsinn. Damit wird die Tabellenzelle halbtransparent, aber nicht (nur) das Hintergrundbild. Abgesehen davon verstehe ich nicht, was ein halbtransparentes _Hintergrundbild_ für einen Sinn haben soll. Was soll aufgrund der Teiltransparenz durchscheinen? Die Hintergrundfarbe des body?

    Meine Frage ist nun, ob es entweder einen Befehl gibt, mit dessen Hilfe ich Text über ein Bild positionieren kann (was ich net gefunden habe)

    Nein. Weder in HTML noch in CSS gibt es Befehle.
    Du kannst aber ein img-Element und z.B. einen Textabsatz übereinanderlegen, indem du sie mit geeigneten Angaben zur Positionierung in einen gemeinsamen Container packst.

    Eventuel könnte man auch per Javascript ...

    Och nee, vergiss Javascript für solche Sachen! Es muss wirklich nicht sein!

    Schönen Abend noch,

    Martin

    --
    Schon gewusst, dass Aftershave trotz des Namens eigentlich eher fürs Gesicht gedacht ist?
    1. Hi,

      Also brauchst du irgendwo ein Element <img src="..." class="transparent">, wobei der Klassenname ungünstig gewählt ist. Er läuft Gefahr, mit der CSS-Eigenschaft transparent verwechselt zu werden.

      Da es eine CSS-Eigenschaft namens "transparent" nicht gibt, besteht diese Gefahr nicht.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. Hallo Andreas,

        Da es eine CSS-Eigenschaft namens "transparent" nicht gibt, besteht diese Gefahr nicht.

        Was ist z.B. mit color:transparent?
        Seit wann gibt's das nicht mehr?
        So long,

        Martin

        --
        Es gibt Dinge, die sind sooo falsch, dass nicht einmal das Gegenteil stimmt.
        1. Hallo Martin,

          Da es eine CSS-Eigenschaft namens "transparent" nicht gibt, besteht diese Gefahr nicht.

          Was ist z.B. mit color:transparent?

          Da ist „transparent“ ein Wert, keine Eigenschaft. Was du meinst, ist transparent:yes.

          Grüße
           Roland

          1. Hallo Roland,

            Was ist z.B. mit color:transparent?
            Da ist „transparent“ ein Wert, keine Eigenschaft.

            Nein, der Wert _ist_ nach meinem Verständnis die Eigenschaft.
            "Die Verkäuferin ist nett", "Das Bild ist scheußlich", "Das Wetter ist ungemütlich": Da sind die Begriffe "nett", "scheußlich" und "ungemütlich" Eigenschaften dessen, worauf sie sich beziehen. Eine Eigenschaft ist schließlich durch ein Adjektiv gekennzeichnet (deswegen heißt das Adjektiv im Deutschen ja auch Eigeschaftswort).
            Ich weiß, dass der englische Begriff property in der Spec unglücklich übersetzt ist ("Angabe" oder "Datum" wäre besser gewesen, oder noch besser auch "Attribut" wie in HTML), aber man muss ja nicht noch zur Verwirrung beitragen.

            Was du meinst, ist transparent:yes.

            Nein. Dann wäre nach meinem Verständnis "yes" die Eigenschaft, "transparent" das Attribut.

            Ciao,

            Martin

            --
            Du kannst dem Leben nicht mehr Tage geben.
            Aber dem Tag mehr Leben.
            1. Hallo Martin.

              Was ist z.B. mit color:transparent?
              Da ist „transparent“ ein Wert, keine Eigenschaft.

              Nein, der Wert _ist_ nach meinem Verständnis die Eigenschaft.

              Dann besteht hier ein Missverständnis:

              foo {  
                bar: "baz";  
              }
              

              foo = Selektor
                   {} = Ruleset
                  bar = Eigenschaft
                "baz" = Wert

              Das war schon immer so.

              Einen schönen Montag noch.

              Gruß, Ashura

              --
              Last Tears Keep Calling
              See Angels Falling
              Black Shadows In Your Head
              And One Eye For The Dead
              1. Hallo Ashura,

                Nein, der Wert _ist_ nach meinem Verständnis die Eigenschaft.
                Dann besteht hier ein Missverständnis:

                Stimmt. Du hast mich nicht verstanden. ;-)
                Ich rede nicht von der meiner Meinung nach ungünstigen Wortwahl in einer Spezifikation, sondern von der Bedeutung der Worte in allgemein verständlicher Alltagssprache. Und da ist die Übersetzung property für den _Oberbegriff_ einer Auswahl von Eigenschaften eben nicht besonders günstig, wenn nicht sogar irreführend gewählt.

                foo {

                bar: "baz";
                }

                
                >   
                >     foo = Selektor  
                >      {} = Ruleset  
                >     bar = Eigenschaft  
                >   "baz" = Wert  
                  
                Das ist der Spezifikation nach natürlich richtig. Nach dem allgemeinen Sprachverständnis würden aber sowohl "bar" (z.B. "Helligkeit") als auch "baz" (z.B. "stockdunkel") als Eigenschaft bezeichnet.  
                  
                
                > Das war schon [immer](http://www.w3.org/TR/CSS1.html#basic-concepts) so.  
                  
                Das ist kein Widerspruch, sondern zeigt nur, dass es die Technik immer wieder schafft, die Sprache zu vergewaltigen.  
                  
                So long,  
                  
                 Martin  
                
                -- 
                Einer aktuellen Erhebung zufolge sind zehn von neun Ehefrauen eifersüchtig auf ihren Mann.  
                  
                
                
                1. Hallo Martin.

                  Ich rede nicht von der meiner Meinung nach ungünstigen Wortwahl in einer Spezifikation, sondern von der Bedeutung der Worte in allgemein verständlicher Alltagssprache.

                  Hatte ich schon bemerkt.
                  Doch die hier von dir angesprochene Syntax beherbergt nun einmal diese Begrifflichkeiten. Dass diese vom menschlichen Sprachgebrauch abweichen können, dürfte klar sein.
                  Schließlich gibt es im Grunde nur 4+ Elemente. (Je nach Weltanschauung)

                  Das ist der Spezifikation nach natürlich richtig. Nach dem allgemeinen Sprachverständnis würden aber sowohl "bar" (z.B. "Helligkeit") als auch "baz" (z.B. "stockdunkel") als Eigenschaft bezeichnet.

                  Naja, eigentlich als Attribut.

                  Einen schönen Montag noch.

                  Gruß, Ashura

                  --
                  Last Tears Keep Calling
                  See Angels Falling
                  Black Shadows In Your Head
                  And One Eye For The Dead
                  1. Hi,

                    Das ist der Spezifikation nach natürlich richtig. Nach dem allgemeinen Sprachverständnis würden aber sowohl "bar" (z.B. "Helligkeit") als auch "baz" (z.B. "stockdunkel") als Eigenschaft bezeichnet.

                    Naja, eigentlich als Attribut.

                    Hm? Wenn schon, dann wäre "Helligkeit" hier das Attribut, "stockdunkel" die zugehörige Eigenschaft. Das hatte ich ja schon angedeutet.

                    Aber wenigstens eienr versteht mich im Prinzip.  ;-)
                    Schönen Abend noch,

                    Martin

                    --
                    Computer lösen für uns Probleme, die wir ohne sie gar nicht hätten.
                    1. Super Diskussion, hat sehr viel mit dem Thema zu tun!
                      Bitte profilliert euch irgendwo anders... :-X

                      Verstehe nicht, warum jeder hinterfragen muss, was es für einen Sinn hat etwas bestimmtes zu tun. Ich will das transparent und gut ist. Würde ich dir alle meine Überlegungen auf eventuel auftretende Fragen schon im ersten Thread schreiben, würdest das auch nicht richtig finden, oder?

                      Ich will einfach ein halb transparentes Bild mit nem Text drüber, was ich mir dabei denke, hat doch null mit dem Problem zu tun.

                      Das mit der Positionierung ist nen Ansatz, aber ist nicht gerade Auflösungs-Kompatibel.

                      1. Hallo,

                        Super Diskussion, hat sehr viel mit dem Thema zu tun!

                        muss auch mal sein, sei doch bitte nicht so verbissen! ;-)

                        Verstehe nicht, warum jeder hinterfragen muss, was es für einen Sinn hat etwas bestimmtes zu tun.

                        Ganz einfach: Wenn du uns sagst, was du mit einem bestimmten "Trick" erreichen willst, können wir dir vielleicht Alternativen aufzeigen, um für deinen Anwendungsfall dasselbe Ergebnis auf ganz anderem Weg zu erreichen.

                        Das mit der Positionierung ist nen Ansatz, aber ist nicht gerade Auflösungs-Kompatibel.

                        Was für eine Auflösung?
                        Die Bildschirmauflösung hat nichts, aber auch gar nichts mit deiner Webseite zu tun. Und das mit der Positionierung ist, so wie ich es gemeint habe, genausoviel oder so wenig abhängig von der Fenstergröße wie das Anzeigen eines Bildes an sich.

                        So long,

                        Martin

                        --
                        Niemand lebt allein von seinen Träumen.
                        Aber wer träumt, lebt noch.
                      2. Hallo Anton.

                        Super Diskussion, hat sehr viel mit dem Thema zu tun!

                        Und? Sie stört auch nicht.

                        Verstehe nicht, warum jeder hinterfragen muss, was es für einen Sinn hat etwas bestimmtes zu tun.

                        Damit wollen wir herausfinden, ob es nicht ggf. bessere Lösungswege für Probleme gibt, als die, die der Fragende bereits eingeschlagen hat.

                        Würde ich dir alle meine Überlegungen auf eventuel auftretende Fragen schon im ersten Thread schreiben, würdest das auch nicht richtig finden, oder?

                        Doch, das wäre ideal.

                        Ich will einfach ein halb transparentes Bild mit nem Text drüber, was ich mir dabei denke, hat doch null mit dem Problem zu tun.

                        Dies hier ist SELFhtml und nicht GEThtml, daher solltest du auf Rückfragen eingehen. Je ausführlicher und exakter du dein Problem beschreibst, umso bessere Antworten erhältst du.

                        Das mit der Positionierung ist nen Ansatz, aber ist nicht gerade Auflösungs-Kompatibel.

                        Die Bildschirmauflösung ist absolut irrelevant.

                        Für dein Problem empfehle ich dir ein alphatransparentes PNG mit gespeicherter Hintergrundfarbe, die der IE anzeigen kann.

                        Einen schönen Montag noch.

                        Gruß, Ashura

                        --
                        Last Tears Keep Calling
                        See Angels Falling
                        Black Shadows In Your Head
                        And One Eye For The Dead
            2. Hallo Martin,

              Was ist z.B. mit color:transparent?
              Da ist „transparent“ ein Wert, keine Eigenschaft.

              Nein, der Wert _ist_ nach meinem Verständnis die Eigenschaft.

              Deinem Verständnis kann man nachhelfen. ;-p

              "Die Verkäuferin ist nett", "Das Bild ist scheußlich", "Das Wetter ist ungemütlich": Da sind die Begriffe "nett", "scheußlich" und "ungemütlich" Eigenschaften dessen, worauf sie sich beziehen.

              Hier wären aber Verkäuferin, Bild und Wetter Selektoren und die genannten Adjektive Werte. Was fehlt, sind die Eigenschaften.

              verkäuferin { charakter:nett }
               bild { geschmack:scheußlich }
               wetter { eindruck:ungemütlich }

              Worauf du hinauswillst, wäre

              verkäuferin { nett }

              oder

              { verkäuferin:nett }

              Bei beiden Deklarationen fehlt etwas. Wie auch das folgende Beispiel nicht funktionieren würde:

              martin { verkäuferin:nett }

              ;-)

              Eine Eigenschaft ist schließlich durch ein Adjektiv gekennzeichnet (deswegen heißt das Adjektiv im Deutschen ja auch Eigeschaftswort).

              Das sehe ich hinsichtlich CSS etwas anders.

              Was du meinst, ist transparent:yes.

              Nein. Dann wäre nach meinem Verständnis "yes" die Eigenschaft, "transparent" das Attribut.

              Ich verweise auf SELFHTML: CSS-Formate und CSS-Eigenschaften.

              Grüße
               Roland

        2. Hi,

          Was ist z.B. mit color:transparent?

          Das gibt es weder in CSS 2.0 noch in CSS 2.1 ;-)

          CSS 3 erlaubt zwar den Wert transparent für die Eigenschaft color, aber das unterstützt keiner der von mir getesteten Browser (IE 6.0, Firefox 1.5, Opera 8.5, Konquerer 3.4.x).

          Und selbst wenn: die Eigenschaft (property) hier ist im CSS-Sprachgebrauch "color". "transparent" ist im CSS-Sprachgebrauch der Wert ("value").

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          Schreinerei Waechter
          Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.