James: Deckkraft von Ebenen ändern??

Hallöchen,

dass ich mit HTML 4 und CSS schöne Ebenen erstellen und diese auch noch überlappen kann, ist echt fein. Aber kann ich auch die Dekkraft einer Ebene bestimmen a`la Photoshop???

Hab schon in SELFHTML nachgeschaut.

Danke,

James.

  1. tach,

    ich bin mir nicht ganz sicher, ob ich deine Frage richtig verstanden habe:

    Aber kann ich auch die Dekkraft einer Ebene bestimmen a`la Photoshop???

    schau mal unter http://selfhtml.teamone.de/javascript/objekte/layers.htm#z_index nach ...

    Ich nehme ganz einfach an, daß du mit "Ebenen" tatsächlich "Layer" gemeint hast, und die "Deckkraft" der "Schichtposition entspricht. Wenn du was andres meinst, mußt du nochmal nachfragen.

    Christoph S.

    1. ok, war vielleicht etwas verdrückt ausgekehrt:

      Hier zwei Ebenen (engl.=Layer):

      <div style="position:absolute; left:0px; top:0px; width:400px; height:400px; z-index:1; background-color:#ffff80;"></div>
      <div style="position:absolute; left:100px; top:100px; width:150px; height:150px; z-index:2; background-color:#0000ff;"></div>

      Diese überlappen sich ja offensichtlich. Krieg ich es irgendwie so hin, dass die Deckkraft der oberen Ebene (des oberen Layers) nicht 100% beträgt?

      Danke,

      James

      1. meun!

        Diese überlappen sich ja offensichtlich. Krieg ich es irgendwie so hin, dass die Deckkraft der oberen Ebene (des oberen Layers) nicht 100% beträgt?

        das ist imho nicht möglich. entweder haste die layer "visible" oder "hidden"... du könntest aber ein 10x10 grosses gif nehmen (nicht 2x2, einige browser sollen da probleme bekommen) und das "halb transparent" machen... halt halt... natürlich kann man gifs nicht halbtransparent machen, aber du könntest es "rastern", abwechselnd transparent und farbe.

        xoxoxoxoxoxo
        oxoxoxoxoxox
        xoxoxoxoxoxo
        oxoxoxoxoxox

        (wobei x=farbe und o=transparent)

        ob das den gewünschten effekt bringt, weiss ich nicht, aber sonst geht es so wie ich es (hoffentlich richtig) verstanden habe, nicht.

        Danke,

        kein problem.
        in diesem sinne. CoN.

        1. ok, Freunde,

          hab verstanden. Das halb transparente Hintergrundbild soll vor einem großen Hintergrund einen Textbereich hervor heben. Macht denn ein png halb transparente Bilder? Die 6er Browser sollten ja png verstehen. So wäre das natürlich eine Lösung.

          Danke an alle,

          James.

      2. Krieg ich es irgendwie so hin, dass die Deckkraft der oberen Ebene (des oberen Layers) nicht 100% beträgt?

        Das ist noch nicht in CSS definiert, kommt aber sicher mit CSS 3.

        Bis dahin bleibt dir nur, ein teilweise transparentes PNG als Hintergrundbild zu nehmen - und zu hoffen, daß der Browser das auch versteht und korrekt anzeigen kann.

        Oder du nimmst ein teilweise transparentes GIF-Bild. Das wird aber nur deswegen "teilweise" transparent, weil du abwechseln einen transparenten und einen nicht-transparenten Pixel setzen mußt, also im Prinzip ist das GIF durchlöchert wie ein Sieb.

        - Sven Rautenberg

      3. aha ...

        <div style="position:absolute; left:0px; top:0px; width:400px; height:400px; z-index:1; background-color:#ffff80;"></div>
        <div style="position:absolute; left:100px; top:100px; width:150px; height:150px; z-index:2; background-color:#0000ff;"></div>

        Diese überlappen sich ja offensichtlich. Krieg ich es irgendwie so hin, dass die Deckkraft der oberen Ebene (des oberen Layers) nicht 100% beträgt?

        Nach meinem Kenntnisstand geht das nicht. Du kannst festlegen, ob und wann so ein Layer sichtbar oder unsichtbar sein soll, aber halbdurchsichtig geht merines Wissens nicht.

        Die Frage ist, wozu du so etwas brauchst. Gegebenenfalls kannst du den gewünschten Effekt auch erzielen, wenn du ohne Layer einfach über bzw. unter den Bereich, der angezeigt werden soll, noch ne transparente Grafik legst. Also eine Hintergrundgrafik mit der anzuzeigenden Information, und darüber/davor eine Tabelle mit transparenten Gra<fiken in den entsprechenden Tabellenzellen.
        Wie gesagt, das hängt davon ab, _was_ du inhaltlich transportieren möchtest.

        Eine andere Möglichkeit wäre noch, einen "Layer im Layer" zu positionieren, also zwei DIV's zu verschachteln.

        Danke,

        James

  2. dass ich mit HTML 4 und CSS schöne Ebenen erstellen und diese auch noch überlappen kann, ist echt fein.

    Sinvolle Anwendungen sind extrem selten...

    Aber kann ich auch die Dekkraft einer Ebene bestimmen a`la Photoshop???

    "Deckkraft" höre ich zwar nicht sehr oft, aber nein, das haben wir für CSS Level 3 vorgeschlagen und in Mozilla ist etwas derartiges derzeit auch über die Eigenschaft -moz-opacity implementiert, aber was offizielles gibt es noch nicht.

    1. Hi, Björn

      dass ich mit HTML 4 und CSS schöne Ebenen erstellen und diese auch noch überlappen kann, ist echt fein.

      Sinvolle Anwendungen sind extrem selten...

      Anwendung des Sinnvollen ebenso ;-)

      "Deckkraft" höre ich zwar nicht sehr oft, aber nein, das haben wir für CSS Level 3 vorgeschlagen und in Mozilla ist etwas derartiges derzeit auch über die Eigenschaft -moz-opacity implementiert, aber was offizielles gibt es noch nicht.

      Aber es funktioniert, zB

      filter:alpha(opacity=50); -moz-opacity:50%;

      LG Orlando

  3. hi,

    sowas geht afaik nur im ie ab 4, und dann auch nur auf dem PC. Ich bin mir mit der Syntax nicht ganz sicher, sitze grade am Mac und kanns nicht testen. Geht etwa so:

    document.getElementById("ID").style.filter = 'alpa(50)';

    mehr findest Du bei MS in den dokus.

    hth + Gruss  Joachim

    1. hi,

      nu weiss ichs wieder:

      document.getElementById("ID").style.filter = 'alpa(50)';

      document.getElementById("ID").style.filter = 'alpa(opacity=50)';
      Angeblich soll auch im css <p style="position:absolute; filter:alpa(opacity=50);"> gehen.

      hth und Gruss Joachim

  4. Hi,

    Im Internet Explorer werden ab version 5.5 Filter unterstuetzt, mit denen man Layer u.a. transparent machen kann.

    <DIV STYLE="width:100%; background-color:red; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);">
    Halbtransparenter Layer.
    </DIV>

    Gruss, Mel

    Hallöchen,

    dass ich mit HTML 4 und CSS schöne Ebenen erstellen und diese auch noch überlappen kann, ist echt fein. Aber kann ich auch die Dekkraft einer Ebene bestimmen a`la Photoshop???

    Hab schon in SELFHTML nachgeschaut.

    Danke,

    James.

  5. Hi, James

    dass ich mit HTML 4 und CSS schöne Ebenen erstellen und diese auch noch überlappen kann, ist echt fein. Aber kann ich auch die Dekkraft einer Ebene bestimmen a`la Photoshop???

    Wie im Thread schon besser beschrieben, bestehen mehrere Möglichkeiten:

    • Halbtransparentes .PNG (Alphakanal 50%)
    • Halbtransparentes .GIF (abwechselnde Pixel)
    • noch proprietäre Stylesheets

    Die zweite Variante funktioniert in allen Browsern -> mach' es besser so.

    Es folgt definitiv keine Werbung ;-) Die dritte Variante kannst du dir mit Mozilla auf http://www.skop.net/strict/ ansehen. Der IE sollte das auch so darstellen können, nur kapiert er position:fixed nicht.

    LG Orlando