Hallo
ZitatHallo 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:
<!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>Informationen zu transparenten Farben findest du zum Beispiel unter
http://www.html-seminar.de/css…-mit-transparenz-hsla.htm
oder
http://www.farbenundleben.de/w…ign_RGBa_HSLa_opacity.htm
Gruss
MrMurphy