Body (Hintergrund Bild und Farbe) gleichzeitig nutzen?

whazza

Hallo ich habe da mal eine Frage, und zwar kann man auf "background-image" noch irgendwie "background-color" darüberlegen.
Grund dafür ist das ich das Bild ein wenig verdunkeln möchte, wollte schwarze Farbe drüber legen und ein Wenig transparent machen.

Würde mich über eine Antwort sehr freuen.
mfg

whazza

MrMurphy

Hallo

Zitat

Hallo ich habe da mal eine Frage, und zwar kann man auf "background-image" noch irgendwie "background-color" darüberlegen.

Ja. Du fügst einfach zwei Hintergrundbilder ein.

Das erste als linear-gradient mit rgba oder hsla als Farbe, um die Farbe transparent (durchscheinend) machen zu können. Als Farbe gibst du einfach die gewünschte Farbe zweimal ein. Die Durchsichtigkeit wird über die letzte Zahl gesteuert. In meinem Beispiel zweimal die 0.4. Der Wert darf zwischen 0 (vollkommen durchsichtig) und 1 (Vollfarbe) liegen.

Dadurch sind auch zusätzliche Effekte möglich, zum Beispiel die Transparenz unterschiedlich anzupassen oder zwei unterschiedliche Farben zu wählen.

Das zweite ist dann die eigentliche Grafik.

Die Reihenfolge ist wichtig, damit die beiden Bilder richtig gestapelt sind.

Zum Beispiel:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Zwei Hintergrundbilder 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>




   /*Meine persönlichen Grundeinstellungen für alle Seiten*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%;
      }
      body {
         margin: 0;
      }
   }




   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */




   /*Spezielle Einstellungen*/
   @media all {
      html {
         width: 100%;
         height: 100%;
         padding: 0;
         border: 0;
         margin: 0;
      }
      body {
         /*background-color: yellow;*/
         background-image: 
            linear-gradient(hsla(360,0%,0%,0.4), hsla(360,0%,0%,0.4)),
            url(https://upload.wikimedia.org/wikipedia/commons/c/c6/Bayerischer_Wald_-_Aufichtenwald_001.jpg)
            ;
         background-size: cover;
         background-repeat: no-repeat;
         min-width: 100%;
         min-height: 100%;
         padding: 0;
         border: 0;
         margin: 0;
      }
   }




   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */




   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
</body>
</html>

Alles anzeigen

Informationen zu transparenten Farben findest du zum Beispiel unter

https://www.html-seminar.de/css3-farben-mi…parenz-hsla.htm

oder

http://www.farbenundleben.de/webdesign/webd…SLa_opacity.htm

Gruss

MrMurphy

Jetzt mitmachen!