Hey @Tina17
Danke für die Frage und hast du vielleicht ein Beispiel das den Sachverhalt etwas näher veranschaulicht was du erreichen möchtest? Das würde uns helfen das Problem etwas mehr einzugrenzen denn das ist im Grunde ein sehr Breites Thema mit dem transparenten Hintergrund und dem settings_schema.json. Wie du ja weisst, so etwas immer zuerst in einer Themekopie/Testumgebung testen und Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen.
Du kannst auch den neuen CSS-Editor verwenden und die RGBA-Farbcodierung verwenden, wie z. B. die Farbe #C9DFBE in RGBA umwandeln und den Alphakanal für die Transparenz anpassen. Hier eine Umrechnung der Farbe (#C9DFBE) in RGBA:
- Zerlege den Hex-Code in die RGB-Komponenten: R: C9 (201) G: DF (223) B: BE (190)
- Füge den Alphawert (A) hinzu - der Alphawert liegt zwischen 0 und 1, wobei 0 vollständig transparent und 1 vollständig opak ist. Für 80%, 60% und 30% Transparenz verwende 0,8, 0,6 bzw. 0,3 als Alphawerte.
Nun haben wir drei RGBA-Farbcodes mit unterschiedlicher Transparenz:
- 80% Transparenz: rgba(201, 223, 190, 0.8)
- 60% Transparenz: rgba(201, 223, 190, 0.6)
- 30% Transparenz: rgba(201, 223, 190, 0.3)
Gehe zum CSS-Editor und verwende ihn um den Farbcode des Elements oder der Klasse in den gewünschten RGBA-Farbwert zu ändern. Zum Beispiel:
.example-class {
background-color: rgba(201, 223, 190, 0.8); /* 80% Transparenz */
}
Ersetze “Example class” mit der Class die du ändern möchtest. Diese findest du wenn du einen Rechtsklick an der genauen Stelle im Storefront machts → “Inspect”, und in der Developer Console die genauen Class suchst und findest.
Das schöne am CSS Editor ist dass du damit rumspielen kannst bis es klappt. 