Cover-hintergrund-Bild mit transparentem hintergrund-Farbe (Vollbild)

möchte ich auf mein hintergrund Bild mit transparenter Farbe,aber die Farbe deckt nicht das hintergrund Bild.

hier ist meine demo:
http://jsfiddle.net/farna/73kx2/

css-code:

.overlay{
    background: rgba(0,0,255,0.5);
    margin: 0 ;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
  • benutzt du die Deckkraft ?
InformationsquelleAutor Farna | 2014-08-06
  1. 2

    LIVE-DEMO

    alles, was Sie tun müssen, um dies zu erreichen, ist die Verwendung Pseudo-Elemente - CSS auf den Körper.
    Hier bin ich mit der body:after

    1. Der Stil:

    body{
    position:relative;
    background: url(http://8pic.ir/images/cgnd518gxezm1m2blqo7.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
    margin:0
}
body:after{
    position:fixed;
    content:"";
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,255,0.5);
    z-index:-1;
}

    Cover-hintergrund-Bild mit transparentem hintergrund-Farbe (Vollbild)

    hier ist dein HTML -

    2. Die Markup:

    <body>
      <div class="overlay">
          <nav>
             <ul>
                <li><a href="#portfolio">SHOP</a></li>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#contact">PRESS</a></li>
              </ul>
           </nav>
      </div>
</body>
    InformationsquelleAutor Gildas.Tambo
  2. 2

    Hinzufügen position: fixed zu Ihrer css-Regel:

    http://jsfiddle.net/73kx2/1/

    • Deine Antwort ist richtig, aber es scheint, die ul ist hier für die Menü-navigation. und wenn wir Strecken es überall auf der Seite dann kein anderer Abschnitte auf der Seite zu sehen. Es wird besser sein, haben ein dummy-element, für das Abtönen von Effekt.
    InformationsquelleAutor Horen
  3. 1

    Hinzufügen height:100% zu html und body. Aktualisieren Sie Ihre CSS wie unten.

    body, html{height:100%; margin:0; padding:0;}
.overlay{
background: rgba(0,0,255,0.5);
margin: 0;
width: 100%;
height: 100%;
padding:0;
}
ul{margin:0;}

    DEMO

    InformationsquelleAutor Suresh Ponnukalai
  4. 1

    Hinzufügen von position: fixed, um die overlay -: 

    .overlay{
    background: rgba(0,0,255,0.5);
    margin: 0 ;
    width: 100%;
    height: 100%;
    top: 0px;
    position: absolute;
    left: 0px;
}

    DEMO

    InformationsquelleAutor Faiz Ahmed
  5. 0

    Aktualisierte CSS -

    .overlay{
    background: rgba(0,0,255,0.5);
    margin: 0 ;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

    height im 100% erbt es die parent. So haben Sie auf hinzufügen, um body, und body's Eltern html zu.

    Aber einfachste Weg zum erstellen, Abdeckung overlay mit top: 0; left: 0; bottom: 0; right: 0; position: absolute | fixed;

    InformationsquelleAutor sarbbottam
  6. 0

    Verwenden Sie den folgenden code für das optimale Ergebnis

    <html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>
    InformationsquelleAutor Sudharsun
Schreibe einen Kommentar