kostenloser Webspace werbefrei: lima-city


negativ durchsichtige Schrift css

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    w3j

    w3j hat kostenlosen Webspace.

    Hallo,
    Ich habe das Problem das ich einen div Conteiner mit rgba(0,0,0,0.2) durchsichtig gemacht habe.
    Nun möchte ich, das die Schrift wieder die Farbe des Hintergrundes bekommt aber rgba(0,0,0,-0.2) funktioniert nicht
    Bitte um Hilfe da ich im Internet nichts brauchbares gefunden habe.
    w3j
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    Weil das so nicht geht wie Du dir das denkst. Durchsichtig wird Dein Div mit allem was drin ist. Wenn die Schrift nicht durchsichtig sein soll (bzw eine geringere Opazität haben soll), dann darf sie nicht Kindelement des Divs mit dem Alphawert sein.

    Du hast:

    Div (alphawert) -> Schrift

    Du brauchst

    · · · · · Element (alphawert)
    · · · · · · /
    · · · ·Div
    · · · · · · \
    · · · · · Schrift


    Beitrag zuletzt geändert: 20.8.2014 17:10:53 von sonok
  4. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Du könntest ja mal probieren, einen Gradienten zu verwenden, also

    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%);


    Das müsste eigentlich genausso wirken, als wenn du eine PNG - Grafik mit komplett Schwarz und 20% Deckung als background-image verwendest.

    Beitrag zuletzt geändert: 20.8.2014 17:19:43 von mein-wunschname
  5. Denke mal dass du RGBA noch nicht richtig verstanden hast, also hier mal ein Beispiel:
    background-color: rgba(0, 0, 0, 0.1); /*  10% Deckkraft */
    color: rgba(0, 0, 0, 1);              /* 100% Deckkraft */

    Also der Alpha-Wert ist immer 100 * WERT = WERT%

    In deinem Fall wäre der Alpha-Wert -20%, welcher in der CSS3 Spezifikation nicht vorgesehen ist.

    http://www.w3schools.com/cssref/css_colors_legal.asp

    Beitrag zuletzt geändert: 21.8.2014 4:47:24 von strange
  6. Autor dieses Themas

    w3j

    w3j hat kostenlosen Webspace.

    Hallo,
    Hab ausprobiert ob es funktioniert wenn ich den text nicht in den div mit dem Hintergrund lege, hatt aber auch nicht funktioniert, genauso wie mit opacity

    Eigendlich schade das das wohl nicht funktioniert
    w3j
  7. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Am besten, du zeigst mal, was du gemacht hast.
  8. Autor dieses Themas

    w3j

    w3j hat kostenlosen Webspace.

    Hallo,
    Sehr vereinfacht soll es dann so aussehen, nur mit -20% durchsichtiger Schrift:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <title>footer test</title>
    <style>
    body {
    padding: 0px;
    margin: 0px;
    }
    footer b{
    position: fixed;
    bottom: 5px;
    left: 15px;
    color: rgba(0,0,0,0.2);
    //20% negativ
    z-index: 8;
    font-family: Monospace;
    font-size: 18px;
    }
    footer b a{
    color: rgba(0,0,0,0.2);
    //20% negativ
    }
    div.footer{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height:32px;
    z-index: 8;
    background-color: rgba(0,0,0,0.2);
    }
    </style>
    </head>
    <body>
    <div class="footer">
    <footer>
    <b>
    <a href="#">link1</a> | <a href="#">link2</a></b>
    </footer>
    </div>
    </body>
    </html>

    w3j
  9. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Schau dir das mal an

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
        <meta charset="utf-8">
        <title>footer test angepasst</title>
        <style>
            body {
                padding: 0px;
                margin: 0px;
                background-color: red;
            }
            footer {
                position: fixed;
                bottom: 5px;
                left: 15px;
                /* color: rgba(0, 0, 0, 0.2);*/
                /* 20% negativ */
                z-index: 8;
                font-family: Monospace;
                font-size: 18px;
            }
            footer a {
                color: rgba(0, 0, 0, 1);
                font-weight: 800;
                /* 20% negativ */
            }
            div.footer {
                position: fixed;
                bottom: 0px;
                left: 0px;
                right: 0px;
                width: 100%;
                height: 32px;
                z-index: 8;
                background-color: rgba(0, 0, 0, 0.2);
            }
        </style>
    </head>
    
    <body>
        <div class="footer">
            <footer>
                <a href="#">link1</a> | <a href="#">link2</a>
            </footer>
        </div>
    </body>
    
    </html>
  10. Autor dieses Themas

    w3j

    w3j hat kostenlosen Webspace.

    Hallo mein-wunschname,
    ich glaube du hast mich falsch verstanden.
    Ich wollte das die Schrift wieder die Farbe des Hintergrundes annimmt und nicht 100% Schwarz wird, sondern in deinem Fall rot.
    w3j
  11. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    w3j schrieb:
    Hallo mein-wunschname,
    ich glaube du hast mich falsch verstanden.
    Ich wollte das die Schrift wieder die Farbe des Hintergrundes annimmt und nicht 100% Schwarz wird, sondern in deinem Fall rot.
    w3j


    Ich will nicht absolut behaupten, dass es nicht geht, aber dazu fällt mir keine Lösung ein.

    Hast du so etwas schon einmal irgendwo gesehen?
  12. Autor dieses Themas

    w3j

    w3j hat kostenlosen Webspace.

    Wie ich schon sagte:
    Eigendlich schade das das wohl nicht funktioniert

    Aber ich habe so etwas schon einmal gesehen, aber die haben es wahrscheinlich einfach durch color: #farbe-des-hintergrundes gelöst
    w3j
  13. Versuche mal:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
        <meta charset="utf-8">
        <title>footer test angepasst</title>
        <style>
            body {
                padding: 0px;
                margin: 0px;
                background-color: red;   /* Hintergrund Farbe deiner Wahl */
            }
            footer {
                position: fixed;
                bottom: 5px;
                left: 15px;
                /* color: rgba(0, 0, 0, 0.2);*/
                /* 20% negativ */
                z-index: 8;
                font-family: Monospace;
                font-size: 18px;
            }
            footer a {
                color: red;             /* Hintergrund Farbe */
                font-weight: 800;
                text-decoration: none;  /* Unterstrichen aus */
                /* 20% negativ */
            }
            div.footer {
                position: fixed;
                bottom: 0px;
                left: 0px;
                right: 0px;
                width: 100%;
                height: 32px;
                z-index: 8;
                background-color: rgba(0, 0, 0, 0.8);
            }
        </style>
    </head>
    
    <body>
        <div class="footer">
            <footer>
                <a href="#">link1</a> | <a href="#">link2</a>
            </footer>
        </div>
    </body>
    
    </html>
  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!