Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.
Seiten: 1
#1 15. Mai 2015 20:30
- TeXnik
- probiert CMS/ms aus
- Ort: Irgendwo im Westerwald
- Registriert: 16. Dezember 2010
- Beiträge: 65
Opacity, Transparenz
Ich möchte bei bestimmten Container, daß deren Hintergrund transparent oder fast transparent wird.
Nutze ich im Stylesheet opacity kann ich den gewünschten Effekt erreichen, jedoch wirkt sich das auch auf den Text aus und führt teilweise zu schlechter Lesbarkeit.
z.B.
#box2 { width: 993px; margin: 0 auto; opacity: 0.4; }Wie kann ich verhindern, daß sich die Transparenz auch auf den Text auswirkt?
Offline
#2 15. Mai 2015 21:00
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Opacity, Transparenz
Gar nicht - der Einfachheit halber zitier ich einfach mal
Hier hilft nur, zusätzlich zum semi-transparenten Block einen weiteren Block (ohne Hintergrund) absolut über den semi-transparenten Block zu platzieren. In den zweiten Block wird der Text gesetzt und erscheint dann opakt, also nicht durchsichtig.
Offline
#3 16. Mai 2015 22:14
- Klenkes
- Server-Pate
- Ort: 89428 Syrgenstein
- Registriert: 17. Dezember 2010
- Beiträge: 1.437
Re: Opacity, Transparenz
Das geht natürlich viel einfacher wenn du für die Box die background-color als rgba Wert definierst.
Also: background-color: rgba(0,0,0,0.4);
Dann wird der Text davon nicht betroffen.
Offline
#4 16. Mai 2015 08:54
- TeXnik
- probiert CMS/ms aus
- Ort: Irgendwo im Westerwald
- Registriert: 16. Dezember 2010
- Beiträge: 65
Re: Opacity, Transparenz
Das geht natürlich viel einfacher wenn du für die Box die background-color als rgba Wert definierst.
Also: background-color: rgba(0,0,0,0.4);
Dann wird der Text davon nicht betroffen.
Super, das war es, was ich brauchte. Ich mußte nur alle Boxen innerhalb einer Box suchen und dort rgba(0,0,0,0.0) angeben, um einen einheitlichen Hintergrund zu erhalten.
Auf Basis des Template conceptworks habe ich dann mal was ausprobiert, zu finden unter http://bke-ltd.com/.
Klar das ist noch nicht das Gelbe vom Ei, aber so langsam finde ich mich wieder rein und werde hoffentlich besser.
Anregungen und Tips werde gerne entgegengenommen, da ich normalerweise keine Webseiten gestalte, sondern nur Maschinen und Apparate.
Offline
#5 16. Mai 2015 12:32
- Klenkes
- Server-Pate
- Ort: 89428 Syrgenstein
- Registriert: 17. Dezember 2010
- Beiträge: 1.437
Re: Opacity, Transparenz
Tipp:
Du hast in deinem CSS überall dies stehen: background-color: rgba(0,0,0,0.0); auch für body... Das macht keinen Sinn! 0,0,0,0.0 ist ohne Deckung, also transparent.
Willst du keine Farbe haben, dann notiere lieber: background-color:transparent;
rgba verschlingt mehr Resourcen als background-color:transparent
Offline
#6 16. Mai 2015 16:28
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Opacity, Transparenz
Auf Basis des Template conceptworks habe ich dann mal was ausprobiert, zu finden unter http://bke-ltd.com/.
Wenn du schon etwas Neues ausprobieren möchtest, wäre es sicherlich keine schlechte Idee, gleich auf ein responsives Template zu gehen.
Hab mir gerade die Seite auf nem Netbook angeschaut - da sehe ich nur die halbe Seite, und muss seitwärts scrollen, um alles zu sehen ...
Offline
#7 16. Mai 2015 17:24
- TeXnik
- probiert CMS/ms aus
- Ort: Irgendwo im Westerwald
- Registriert: 16. Dezember 2010
- Beiträge: 65
Re: Opacity, Transparenz
Willst du keine Farbe haben, dann notiere lieber: background-color:transparent;
rgba verschlingt mehr Resourcen als background-color:transparent
Dieses statement kannte ich noch und hab es als erstes probiert. Es blieb ohne Wirkung, daher meine Frage.
Wenn du schon etwas Neues ausprobieren möchtest, wäre es sicherlich keine schlechte Idee, gleich auf ein responsives Template zu gehen.
Und wie geht das?
Offline
#8 16. Mai 2015 18:32
- Klenkes
- Server-Pate
- Ort: 89428 Syrgenstein
- Registriert: 17. Dezember 2010
- Beiträge: 1.437
Re: Opacity, Transparenz
Als erstes würde ich die Breite des body entfernen: width:1839px; Das ist kompletter Blödsinn! Dann verschwindet auch der horizontale Scrollbalken.
Und den Hintergrund des body Tags würde ich so notieren:
background:transparent url(/uploads/conceptwork/bg2.png) no-repeat top center;
Und dann das extra background-color raus.
JESSAS! Drunter steht height:983; Das muss auch raus! Da fehlt sowieso die Einheit.
Und Cyberman meint, dass es heutzutage wenig Sinn macht, noch auf ein Template zu setzen, welches mit absoluten Pixelbreiten arbeitet.
War dieses Conceptworks ein auf CMSMS zugeschnittenes Template? Gab es dort vielleicht auch eines das responsive ist?
Beitrag geändert von Klenkes (16. Mai 2015 18:36)
Offline
#9 17. Mai 2015 05:59
- TeXnik
- probiert CMS/ms aus
- Ort: Irgendwo im Westerwald
- Registriert: 16. Dezember 2010
- Beiträge: 65
Re: Opacity, Transparenz
Conceptworks habe ich über die cmsms Seiten vor über 3 Jahren runtergeladen.
Mir gefiel es, da ich mit meinen fast nicht vorhandenen Kenntnissen dort basteln konnte.
Wenn eine Einheit fehlt, so ist da meine Schuld. Die wurde sicherlich beim ein- und umkopieren getilt.
Habe es nun nach den Vorschlägen umgesetzt. Dabei machte ich einen kleinen Tippfehler (dicke Finger drücken 2 Tasten gleichzeitig).
Das war wohl auch der Grund warum background:transparent: nicht funktionierte. Beziehungsweise, wo es richtig war, konnte ich es nicht erkennen, weil es bei der darunter liegenden Box nicht klappte.
Danke.
Offline
Seiten: 1