Gerdi: Bild überlagern

SELF-Forum

Bild überlagern

Gerdi
– Informationen zu den Bewertungsregeln

Hallo, kann mir jemand kurzfristig helfen. Wegen eines Trauerfalls möchte ich über meine Seiten einen Trauerflor legen. Das Bild (transparent) habe ich gemacht. Wie kann ich es über den Hintergrund legen. Da ich gerne sofort reagieren möchte kann ich leider nicht groß nach Lösungsmöglichkeiten suchen. Sonst würde ich natürlich gerne nach dem Motto Selfhtml selbst eine Lösung suchen. Vielen Dank

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bild überlagern

    MrMurphy1
    – Informationen zu den Bewertungsregeln

    Hallo

    Ohne das Bild und den Quelltext (HTML und CSS) zu kennen ist keine konkrete Hilfe möglich.

    Allgemein: Der Trauerflor wird als Hintergrundbild mit einer Größe von 100% x 100% eingebunden und dem Inhalt dann ein margin oder padding gegeben, damit der Inhalt sich innerhalb der Trauerflors befindet.

    Oder du verwendet die CSS-Eigenschaft border-image. Siehe zum Beispiel

    http://www.peterkroener.de/schoenes-neues-css-border-image/

    Gruss

    MrMurphy

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bild überlagern

      Felix Riesterer Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Lieber MrMurphy1,

      Oder du verwendet die CSS-Eigenschaft border-image. Siehe zum Beispiel

      das war jetzt aber nicht fein, denn die Seite ist "kaputt", das CSS für das Beispiel dort wird nicht eingebunden.

      Feiner wäre gewesen in unser Wiki u verlinken: border-image

      Liebe Grüße,

      Felix Riesterer.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Bild überlagern

    Rolf b (Versionen)
    – Informationen zu den Bewertungsregeln

    Mein Beileid, übrigens.

    Wenn Du "ÜBER" Deine Seiten einen Trauerflor legen willst, dann wird das nicht gehen weil der dann in der z-order vor der Seite ist und alle User-Interaktionen abfängt.

    Wenn DU den Flor über deine Hintergrundgrafik legen willst - sind multiple Hintergrundgrafiken eine Options für Dich?

    body {
    background-image: url(trauerflor.png), url(normalerhintergrund.png);
}
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bild überlagern

      Gunnar Bittersmann Homepage des Autors (Versionen)
      +1 Informationen zu den Bewertungsregeln

      @@Rolf b

      Wenn Du "ÜBER" Deine Seiten einen Trauerflor legen willst, dann wird das nicht gehen weil der dann in der z-order vor der Seite ist und alle User-Interaktionen abfängt.

      Doch, das geht.

      Das Pseudoelement html::after ist fixed zu positionieren und ihm das Hintergrundbild zu geben (was dann ein Vordergrundbild ist); background-size bei Bedarf auf cover bzw. contains zu setzen.

      Damit man trotzdem durch das Bild durchclicken kann, ist unbedint pointer-events: none zu setzen. Und damit man die Seite auch in allen Browsern nutzen kann, ist die Browserunterstützung dafür abzufragen, das Ganze also in @supports(pointer-events: none) { } zu setzen.

      Sähe dann so aus.

      Das Bild muss nicht den ganzen Viewport füllen; dann top, right, bottom, left entsprechend anpassen.

      LLAP 🖖

      --
      “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

  3. Bild überlagern

    Linuchs
    – Informationen zu den Bewertungsregeln

    Wegen eines Trauerfalls möchte ich über meine Seiten einen Trauerflor legen.

    Du meinst so einen schwarzen Balken, der um 45° gedreht in einer Ecke des Bildschirms positioniert wird?

    Dann nimm doch einen schwarzen Balken und drehe ihn um 45°.

    <body>
<style scoped>
.hinweis {
  position: fixed;
  left: 50%;
  width: 100%;
  top: 20%;
  height: 2em;
  background: rgba( 0,0,0, .3 );
  transform: translate( -5mm, 5mm ) rotate(45deg);
  padding: 1em;
  z-index: 2;
}
</style>
<div class=hinweis></div>

    Den Grad der Schwärzung stellst du ein mit dem vierten Wert von rgba. 1 = deckend.

    Linuchs

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bild überlagern

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Linuchs

      transform: translate( -5mm, 5mm ) rotate(45deg);

      mm? Nicht dein Ernst, oder?

      <div class=hinweis></div>

      div? Nein. Pseudoelement, ja.

      Auch wenn der Balken vermutlich keinen Link vollständig verdeckt, sollte 'pointer-events: none' nicht fehlen. @supports ist in diesem Fall vermutlich nicht erforderlich.

      LLAP 🖖

      --
      “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln