background image opacity

[Linuchs]

Moin,

ich denke, das Thema war hier schonmal, aber ich weiss die Stichworte nicht mehr, um es wieder zu finden.

Ich drucke mehrere Seiten und möchte pro Seite ein dezentes Hintergrundbild, also mit wenig Deckkraft. So weit ich weiss, ist das für Hintergrundbilder nicht vorgesehen, und so bleibt der Hintergrund drucklos:

.a5 {
  width: 195mm;
  height: 130mm;
  border: 1px solid #f88;
  margin-top: 5px;
}
.a5::after {
  content: "";
  background: url (img/event_urkunde_quer.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

Ist das mit CSS zu machen oder muss ich in HTML jeder Seite ein absolut positioniertes Bild geben?

[Matthias Apsel]

Hallo Linuchs,

Ich drucke mehrere Seiten und möchte pro Seite ein dezentes Hintergrundbild, also mit wenig Deckkraft. So weit ich weiss, ist das für Hintergrundbilder nicht vorgesehen, und so bleibt der Hintergrund drucklos:

opacity wirkt auf das gesamte (Pseudo-)Element, also auch auf den Hintergrund. Insofern sollte das genauso funktionieren (Ich gehe mal davon aus, dass du das gewünschte Bild am Bildschirm wie gewünscht sehen kannst). Hast du bedacht, dass die meisten Browser eine Option zum Drucken von Hintergründen haben?

Bis demnächst
Matthias

[marctrix]

Hej Linuchs,

Moin,

ich denke, das Thema war hier schonmal, aber ich weiss die Stichworte nicht mehr, um es wieder zu finden.

Ich drucke mehrere Seiten und möchte pro Seite ein dezentes Hintergrundbild, also mit wenig Deckkraft. So weit ich weiss, ist das für Hintergrundbilder nicht vorgesehen, und so bleibt der Hintergrund drucklos:

.a5 {
  width: 195mm;
  height: 130mm;
  border: 1px solid #f88;
  margin-top: 5px;
}
.a5::after {
  content: "";
  background: url (img/event_urkunde_quer.jpg);
  [blabla]
}

Ist das mit CSS zu machen oder muss ich in HTML jeder Seite ein absolut positioniertes Bild geben?

Du hast es doch schon selbst gelöst :-D

Nur: wozu das ::after? Warum gibst du das Hintergrundbild nicht .a5 mit? Mach es einfach mittels Photoshop so blass, wie du möchtest oder verwende teiltranparentes PNG.

Wenn du ein Bild mehrfach verwenden möchtest oder die Darstellung später mal ändern möchtest, dann bietet CSS den Vorteil für den Autoren, dass man nur eine CSS-Regel anpassen muss, statt die Datei wieder mit PS bearbeiten zu müssen. Ist bequem. Die von mir geschätzte Lea Verou propagiert das. Andererseits muss die opacity bei jedem Seitenaufruf neu berechnet werden. Ich halte es für (energie)effizienter, die Berechnung einmal mit PS zu erledigen und dann das Bild so auszuliefern, wie es ist.

Lasse mich aber gerne hier eines besseren belehren.

Marc