ichmagwahsaga: Wenn Bild, dann keine Hintergrundfarbe anzeigen

Kurz und knackig:

Kann ich nur mit CSS erreichen, dass, wenn Bilder im Browser angezeigt werden, der Hintergrund transparent ist (background-color:transparent;) und ansonten (wenn Bilder nicht angezeigt werden (können)) z.B. blau ist?

<div class="gruß"></div>

  1. Hi,

    Kann ich nur mit CSS erreichen, dass, wenn Bilder im Browser angezeigt werden, der Hintergrund transparent ist (background-color:transparent;) und ansonten (wenn Bilder nicht angezeigt werden (können)) z.B. blau ist?

    Und was soll hinter dem Transparenten Body zu sehen sein?

    Was hast du alles schon probiert?

    Grüße,
    Engin
     GYRO

    --
    Dilated peoples|Team Vestax
    Gut ist der, der nach dem finden noch weiß, was er suchte.
    1. Guten Abend,

      Und was soll hinter dem Transparenten Body zu sehen sein?

      Es geht nicht speziell um den body oder ähnliches. Quelltext:

      <div style="background-color:black;">
         <div style="background-image:url(1px_halbtransparent.png);/*background-color:white;?*/">
            text text text
         </div>
      </div>

      Wenn Bilder angezeigt werden, sieht der Benutzer einen dunklen Hintergrund und auf diesem Hintergrund ein sagen wir 20%+20% großes div, dass durch ein transparentes PNG zu 80% weiß ist, aber der Hintergrund immernoch etwas durchscheint, sodass er den schwarzen Text lesen kann. Wenn allerdings Bilder deaktiviert sind, ist schwarzer Text auf schwarzem Hintergrund. Nun könnte man zwar weiß als Hintergrundfarbe nehmen, aber dann scheint der Hintergrund nicht mehr durch, wenn Bilder angezeigt werden.

      Was hast du alles schon probiert?

      Probiert? Ich habe nichtmal einen Ansatz. Ich möchte auf jedenfall ein transparentes PNG benutzen, weil ich dann flexibel die Hintergrundfarbe ändern kann. Mit JS wäre das ganze möglich, aber was ist mit Besuchern, die weder Javascript noch Bilder einschalten?

      1. hallo,

        Wenn Bilder angezeigt werden, sieht der Benutzer einen dunklen Hintergrund und auf diesem Hintergrund ein sagen wir 20%+20% großes div, dass durch ein transparentes PNG zu 80% weiß ist

        Warum derart umständlich?

        Was hast du alles schon probiert?
        Probiert? Ich habe nichtmal einen Ansatz.

        Aha. deshalb hast du ja etwas weiter oben deinen "Ansatz" auch darzustellen versucht.

        Ich möchte auf jedenfall ein transparentes PNG benutzen, weil ich dann flexibel die Hintergrundfarbe ändern kann.

        Du kannst das vielleicht, aber der IE6 kann das nicht. Und so ganz "aus der Mode" ist der ja noch nicht.

        Mit JS wäre das ganze möglich, aber was ist mit Besuchern, die weder Javascript noch Bilder einschalten?

        Die kriegen eben die Alternative zu sehen, die du für sie vorbereitet hast. Was ist jetzt dein Problem?

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. hallo,

          Wenn Bilder angezeigt werden, sieht der Benutzer einen dunklen Hintergrund und auf diesem Hintergrund ein sagen wir 20%+20% großes div, dass durch ein transparentes PNG zu 80% weiß ist

          Warum derart umständlich?

          Umständlich? Ganz im Gegenteil. Umständlich ist es, wenn ich mehrere Sachen auf einmal ändern muss. Mit Transparenz fällt das weg.

          Was hast du alles schon probiert?
          Probiert? Ich habe nichtmal einen Ansatz.

          Aha. deshalb hast du ja etwas weiter oben deinen "Ansatz" auch darzustellen versucht.

          Als "Ansatz" würde ich das nicht bezeichnen ;)

          Ich möchte auf jedenfall ein transparentes PNG benutzen, weil ich dann flexibel die Hintergrundfarbe ändern kann.

          Du kannst das vielleicht, aber der IE6 kann das nicht. Und so ganz "aus der Mode" ist der ja noch nicht.

          Beim IE wird auch ein "Get Firefox" angezeigt ;)

          Mit JS wäre das ganze möglich, aber was ist mit Besuchern, die weder Javascript noch Bilder einschalten?

          Die kriegen eben die Alternative zu sehen, die du für sie vorbereitet hast. Was ist jetzt dein Problem?

          Das Problem ist, dass die Alternative ein schwarzer Text auf schwarzem Hintergrund ist. Tolle "Alternative".

  2. hallo,

    Kann ich nur mit CSS erreichen, dass, wenn Bilder im Browser angezeigt werden, der Hintergrund transparent ist (background-color:transparent;) und ansonten (wenn Bilder nicht angezeigt werden (können)) z.B. blau ist?

    Kurz und autoritär: nein.

    Allerdings könntest du mit Javascript und getElementsByTagname experimentieren.

    Was es dir bringen soll, trotz vorhandener Grafik den Hintergrund auch noch transparent zu halten, ist mir rätselhaft.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. Hi,

      Kann ich nur mit CSS erreichen, dass, wenn Bilder im Browser angezeigt werden, der Hintergrund transparent ist (background-color:transparent;) und ansonten (wenn Bilder nicht angezeigt werden (können)) z.B. blau ist?

      Kurz und autoritär: nein.

      Erwas ausführlicher und durchdachter: Ja!

      body { background: blue url(transparent.gif) }

      transparent.gif sollte dann eine kleine Grafik mit transparent definierten Pixeln sein. Diese wiederholt sich und sorgt dafür, dass alle Elemente innerhalb von body, für die kein Hintergrund definiert ist, einen transparenten oder blauen Hintergrund haben und sofern nur ein Hintergrundbild angegeben ist, entweder dieses oder eben blue angezeigt wird.

      freundliche Grüße
      Ingo

    2. Hi

      Allerdings könntest du mit Javascript und getElementsByTagname experimentieren.

      Es hiess nur nur: "nur mit CSS". & das ist gut so ohne JS

      Wellenzillich

  3. k & k hi,!

    Kurz und knackig:

    s.o., v.a. "&"!

    Kann ich nur mit CSS erreichen, dass, wenn Bilder im Browser angezeigt werden, der Hintergrund transparent ist (background-color:transparent;) und ansonten (wenn Bilder nicht angezeigt werden (können)) z.B. blau ist?

    Pseudocode:
    <div class="100weit, 100hoch">
        <div class="image, 100x100, border=50px transparent, mittigst,
                    overflow:hidden
        ">
            <img alt="" style='border:50px blauest'>
        </div>
    </div>

    so.ca., und png ist Sonderthema. Und Halbtransparenz geht auch mit jede 2. Pixelzeile loeschen,

    Wellenzillich

    --
    css{baseniveau:0}