• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Transparenter Farbverlauf auf Bild (per CSS), auch zum Drucken

Dieter!

Neues Mitglied
Hallo, ich versuche krampfhaft ein Bild von seitlich links stark transparent bis nach rechts weniger transparent aufzuhellen. Davor soll dann der Text platziert werden.

Mit z.B. background: linear-gradient(100deg, white 70%, white 70%, transparent 120%) auf vorgelegtem div funktioniert das auch ganz gut. Beim Ausdruck verschwindet allerdings die transparente Aufhellung. Andere Ansätze mit opacity oder filter funktionieren zwar für den Ausdruck, aber damit kann ich keinen fließenden Übergang erzeugen.

Gibt es noch weitere Möglichkeiten?
 

Anhänge

  • farbverlauf.jpg
    farbverlauf.jpg
    74,3 KB · Aufrufe: 9
Werbung:
Habe mal etwas gegoogelt.
Versuche mal einen anderen Browser,
oder
Ich habe auch das gleiche Problem gehabt, aber festgestellt, dass es kein CSS-Problem war. Es könnte ein Problem mit der Druckoption sein. Aktivieren Sie "Hintergrundgrafiken" im Druckbildschirm.
 
Ja, wenn man Hintergrund drucken im Browser auswählt, wird es auch gedruckt. Das funktioniert auch in allen Browsern gleich. Ich hätte aber gerne, dass das aufgehellte Bild mit Farbverlauf ohne Hintergrundoption gedruckt wird.
 
Werbung:
Canvas ist ja eine spannende Geschichte, kannte ich noch gar nicht. Allerdings möchte kein Bild zeichnen oder animieren, sondern nur z.B. ein Sonnenuntergang oder ein Tannenbaum schwach im Hintergrund anzeigen lassen. Gelegentlich soll dann einfach das Foto gegen ein anderes getauscht werden und fertig, also ohne an den Bild was ändern zu müssen (langfristig pflegeleicht). Kann man so ein transparenten Verlauf vielleicht mit JavaScript/jQuery erzeigen?
 
Erstmal vielen Dank Sempervivum, das hört sich sehr gut an. Leider habe ich keine Ahnung wie ich die Funktion lighten() auf das Bild anwende. Bitte um weitere Hilfe.

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/TinyColor-master/tinycolor.js"></script>
    </head>


    <body>
        <img id="palmen" src="images/palmen.jpg">
              
              

        <script type="text/javascript">
//            lighten: function(amount = 10) -> TinyColor. Lighten the color a given amount, from 0 to 100. Providing 100 will always return white.
//            tinycolor("#f00").lighten().toString(); // "#ff3333"
//            tinycolor("#f00").lighten(100).toString(); // "#ffffff"
        </script>
    </body>
</html>
 
Vielen Dank, leicht sieht das für mich alles nicht aus; genauer gesagt verstehe ich kein Wort.
Leider läuft das Skript bei mir auch nicht. Ich bekomme zwei gleiche Bilder untereinander. Ich habe nur die beiden dia0.jpg durch meine palmen.jpg ausgetauscht. wImg und hImg liefern noch Werte per console.log, aber bei ctx.getImageData hörts auf. Folgende Fehlermeldungen geben die Browser

Chrome: Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. .. at Image.img.onload

Firefox: Uncaught DOMException: The operation is insecure.
 
Werbung:
Perfekt, besser als ich mir das jemals vorgestellt hätte. Tausend Dank dafür. Ich habe für die Webseite zwei Schieber eingebaut womit man startTop und startBtm einstellen kann. Dadurch hat man dann die größte Flexibilität, auch für den späteren Ausdruck.

Eigentlich lasse ich alles über XAMMP (also localhost) laufen, da ich mehr mit PHP programmiere. In diesen Fall habe ich aber tatsächlich den Code einfach in die Datei kopiert und gedoppelklickt. Nun denn jetzt läuft‘s und ich bin sehr mit dem Ergebnis zufrieden.

Ich habe versuchsweise den delta-Wert verändert in der Hoffnung man könnte die Grundhelligkeit einstellen, leider ohne Erfolg. Wenn das mit sehr wenig Aufwand geht, würde ich noch einen weiteren Schieber für Helligkeit einbauen. Ansonsten lasse ich das so, das ist ja sehr gut so.
 

Anhänge

  • 1623365872209.png
    1623365872209.png
    548,2 KB · Aufrufe: 4
Ich meinte das man Bild ingesamt etwas dunkler regeln kann. Also das was man im CSS mit filter:brightness() oder opacity() einstellen kann, nur eben in Richtung dunkler.
 
Also für startTop und startBtm kann ich einstellen was ich will, rechts wird das Bild nie dunkel. Ich würde schätzen bei opacity(0.5) vom Original bleibt es stehen.
 
Werbung:
Wenn ich es nur besser beschreiben könnte, würde es die Sache sicherlich vereinfachen, sorry dafür.
Die Variante 2. ist ungünstig da links ein dunkler Rand entsteht.
Bei Variante 1. wird zwar der rechte Teil dunkler, aber irgendwie auch grauer. Ideal wäre wenn nur der rechte Teil dem Original näher kommen würde. Ist das dann der Kontrast? Ich weiß es nicht.
 
Jetzt ist es wirklich perfekt :cool:
Ich habe mich für darken = false entschieden.
Nachdem ich gesehen dann habe, dass die Variable „delta“ für die Helligkeit verantwortlich ist, habe ich einen weiteren Schieber (0.1 – 1) damit gekoppelt. Nun kann alles so einstehen wie ich es mir vorgestellt habe.

Was soll ich sagen, tausend Dank für deine umfangreiche Unterstützung…
 

Anhänge

  • 1623459705724.png
    1623459705724.png
    450,6 KB · Aufrufe: 4
Zurück
Oben